js定时器

js · 浏览次数 : 0

小编点评

一、定时器 1. JS存在两种定时器:setTimeout() 和 setInterval()。 - setTimeout:延迟定时器,只在指定时间后执行一次指定的函数。 - setInterval:循环定时器,每隔指定时间执行一次指定的函数。 ```javascript setTimeout(function() { console.log('wuwei'); }, 1000); // 一秒后打印wuwei setInterval(function() { console.log('wuwei'); }, 1000); // 每隔一秒就打印wuwei ``` 2. 清除定时器 在每次使用定时器时,都需要清除定时器。可以通过以下方法清除定时器: ```javascript clearTimeout(timer); // 清除setTimeout clearInterval(timer); // 清除setInterval ``` 3. 定时器函数的参数 - 第一个参数:要执行的函数。 - 第二个参数(可选):定时器执行的毫秒数,可以不传,不会报错。 - 第三及之后的参数:将作为第一个参数函数执行的实参传递。 ```javascript setTimeout(function(a, b) { console.log(a, b); }, 2000, 10, 20); ``` 4. 定时器的第一个参数 - 可以是匿名函数、有名函数、字符串或可以被当成JS语句执行的字符串。 ```javascript // 匿名函数 setTimeout(function() { console.log('无为'); }, 2000); // 有名函数 function haha() { console.log('无为'); } setTimeout(haha, 2000); // 字符串 setTimeout('console.log("hahah")', 2000); ``` 二、JS的单线程 1. 什么是单线程 JS是单线程的,即同时只能执行一个任务。如果后面有任务,需要等到当前任务执行完毕,才能执行后面的任务。 2. 线程阻塞 线程阻塞是指前面的任务死循环或者耗时过长导致后面代码不能被执行。这种情况叫做线程阻塞,会导致问题。为了解决这个问题,浏览器会开辟其他的线程来处理耗时任务,这类任务被称为异步任务。 3. 同步任务与异步任务 - 同步任务:在JS主线程排队执行的任务,形成执行栈。 - 异步任务:不进入主线程,进入任务队列的任务,形成任务队列。只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。 4. JS代码的执行顺序 先执行主程序的任务,当主程序的所有任务都执行结束,再把任务队列中的任务放到主程序中执行。所有同步任务都在主线程上执行,形成一个执行栈。主线程之外,还存在一个“任务队列”。只要异步任务有了运行结果,就在“任务队列”之中放置一个事件。一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。 5. JS中的异步任务 异步任务包括:定时器事件、Ajax等。

正文

一.定时器

1. JS存在两种定时器

setTimeout() 延迟定时器
setInterval() 循环定时器(“间隔器”)

定时器中的函数挂载在window对象,内部的this ——> window

setTimerout(function(){
	console.log('wuwei')
},1000);   // 一秒后打印wuwei
setInterval(function(){
	console.log('wuwei')
},1000);   // 每隔一秒就打印wuwei,如果不清楚或关闭页面,将会无限循环下去

2. 清除定时器

在每次使用定时器时,都必须清除定时器

如何清除定时器呢,每一个定时器开启后都会返回一个对应的id,说白了就是js里面的第几个定时器,通过这个id就可以清除定时器,清除定时器用如下的方法

clearTimeout(timer) ==> 用于清除setTimeout
clearInterval(timer) ==> 用于清除setInterval

// 在开启定时器的同时定义一个变量接受定时器返回的id,用于清除定时器
// 清除setTimeout
var timer = setTimeout(function(){
	console.log('wuwei')
},2000)
clearTimerout(timer);
// 清除setInterval
var timer2 = setInterval(function(){
	console.log('wuwei')
},2000)
clearTimerout(timer2);

3.关于定时器函数的参数

定时器接受多个参数

第一个参数是执行的函数,必须传递,不传没什么意义,不传报错
第二个为定时器执行的毫秒数,可以不传,不会报错,感觉起来是立即执行,其实不是
第三个之后的所有参数,都将是第一个参数函数执行的实参

// 省略第二个参数会立即执行
setTimeout(function(){
	console.log('无为')
})
// 第三个以后的参数是第一个参数函数执行时的实参
setTimeout(function(,a,b){
	console.log(a,b)
},2000,10,20);

HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。不同的浏览器实现不同

4. 关于定时器的第一个参数

定时器的第一个参数可以是多种形式

4.1 匿名函数

setTimeout(function(){
	console.log('无为')
},2000)

4.2 有名函数

setTimeout(function haha(){
	console.log('无为')
},2000)

4.3 有名函数的函数名

function haha(){
	console.log('wuwei');
}
setTimeout(haha,2000)

4.4 能被当成js语句执行的字符串

setTimeout('console.log("hahah")',2000)

二.JS的单线程

1. 什么是单线程

同时只能执行一个任务,如果后面有任务,需要等到当前任务执行完毕,才能执行后面的任务

for(var i = 0; i< 10000;i++){
	console.log(1);
}
console.log(2);

js的是单线程的也就是说上面的代码,无论for循环多么耗时,都必须先执行完,在打印2,这就会造成线程阻塞的问题

2. 什么叫线程阻塞

前面的任务死循环或者耗时过长导致后面代码不能被执行,这种情况叫做线程阻塞,

这样就会出现问题,所以对于像事件,定时器,ajax请求这种非常耗时的程序.浏览器就会开辟其他的线程来处理,所以这些程序我们叫他异步程序

浏览器有三个常驻线程,JS引擎线程,界面的渲染线程,以及浏览器事件触发线程,还有一些执行完就终止的线程,比如HTTP请求线程

在看一个例子:

for(var i = 0; i< 5; i++){
	setTimeout(function(){
		console.log(i)
	},1000)
}
// 打印几

3. 同步任务和异步任务

js的单线程意味着所有的任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

所以JS的任务队列分成两种,同步任务,和异步任务

同步任务:在JS主线程排队执行的任务
​ => 形成执行栈

异步任务:不进入主线程进入”任务队列”的任务
​ => 形成任务队列

异步任务只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行

所以下面的程序定时器会后执行

setTimeout(function(){
	console.log(1)
},0)
for(var i = 0; i< 10000;i++){
	console.log(2)
}

定时器会等待for循环执行完毕后在执行.

4. JS代码的执行顺序

先执行主程序的任务,当主程序的所有任务都执行结束,再把任务队列中的任务放到主程序中执行

所有同步任务都在主线程上执行,形成一个执行栈。
主线程之外,还存在一个”任务队列”。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。
一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
主线程不断重复上面的第三步。

5. JS中的异步任务有哪些???

定时器
事件
Ajax

与js定时器相似的内容:

js定时器

一.定时器 1. JS存在两种定时器 setTimeout() 延迟定时器 setInterval() 循环定时器(“间隔器”) 定时器中的函数挂载在window对象,内部的this ——> window setTimerout(function(){ console.log('wuwei') },

第122篇: JS函数一些基本概念

好家伙,本篇为《JS高级程序设计》第十章“函数”学习笔记 1.函数的三种定义方式:函数表达式、函数声明及箭头函数 函数声明: function sum(a) { return a + 1; } 函数表达式: let sum= function(a){ return a + 1; } 箭头函数: le

如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课(一)

three.js、webgl、3D煤矿隧道、三维井下人员定位、掘进面三维可视化、纵采面可视化、采集面可视化展示、设备检测、数字孪生、物联网3D、3d建筑、3d库房,bim管理系统

第123篇: JS函数属性与方法

好家伙,本篇为《JS高级程序设计》第十章“函数”学习笔记 ECMAScript 中的函数是对象,因此有属性和方法。 1.函数属性 每个函数都有两个属性:length 和 prototype。 length属性: 保存函数定义的命名参数的个数 prototype: toString()、valueOf

行为型:迭代器模式

定义 迭代器模式提供一种方法按顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示。迭代器模式是目的性极强的模式,它主要是用来解决遍历问题。 es6 中的迭代器 JS原生的集合类型数据结构,有Array(数组)和Object(对象),在ES6中,又新增了Map和Set。四种数据结构各自有着自

第一百一十六篇: JavaScript理解对象

好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.关于对象 ECMA-262将对象定义为一组属性的无序集合。严格来说,这意味着对象就是一组没有特定顺序的值。 对象的每个属性或方法都由一个名称来标识,这个名称映射到一个值。正因为如此(以及其他还未讨论的原因),可以把 EC

第一百一十八篇: JavaScript 原型链式继承

好家伙,好家伙,本篇为《JS高级程序设计》第八章“对象、类与面向对象编程”学习笔记 1.原型链 原型链是JS实现"继承"的方案之一 ECMA-262把原型链定义为ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。 重温一下构造函数、原型和实例的关系:每个构造函数

vue3 封装axios

1添加一个新的 http.js文件 封装axios 引入axios //引入Axios import axios from 'axios' 定义一个根地址 //视你自己的接口地址而定 var root2 = 'http://121.4.63.196:8520/api' 定义个小函数来统一参数格式(可

第一百一十五篇: JS集合引用类型Map

好家伙,本篇为《JS高级程序设计》第六章“集合引用类型”学习笔记 1.Map ECMAScript6以前,在JavaScript中实现“键/值”式存储可以使用object来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。 但这种实现并非没有问题,为此TC39委员会专门为“键/值”存储定

《最新出炉》系列初窥篇-Python+Playwright自动化测试-14-playwright操作iframe-番外篇

1.简介 通过前边三篇的学习,想必大家已经对iframe有了一定的认识和了解,今天这一篇主要是对iframe的一些特殊情况的介绍和讲解,主要从iframe的定位、监听事件和执行js脚本三个方面进行展开介绍。 2.iframe定位 2.1动态id属性如何定位 有时候,我们可能看到的iframe 的id