javascript 中的定时器

js 中的定时器 分为 延时定时器 setTimeout 和间隔定时器 setInterval,就这两个定时器说说他们的用法。

延时定时器

经过多少秒后执行指定代码
setTimeout(code,time,param1,param2 ...)

• code: 可以是字符串或者函数
• time：延迟执行code中内容的时间，单位毫秒，默认为0
• param1,param2...paramn：如果code是函数的情况，传入code中的参数

举个例子

// 当code为字符串时
setTimeout('alert(1)', 1000)  // 1秒后弹出alert提示框

// 当code为函数时
setTimeout(function(){
    console.log(22)
},1000)    // 1秒后打印 22

// 传参
setTimeout(function(a,b){
    console.log(a+b)
},1000,1,2)   // 1s 后控制台打印 3（1+2的结果）

间隔定时器

每隔一段时间，就执行一次代码
setInterval(code,time,param1,param2 ...)
参数用法和延迟定时器一样，就不再赘述了。
代码举例

setInterval(function (){
    console.log(1)
},1000)  // 每隔1s打印一次 1

清除定时器

使用 clearTimeout(id) 可以清除延迟定时器，clearInterval(id) 可以清除间隔定时器
setTimeout 和 setInterval 均有返回值，返回值是 定时器的唯一 id，例如：

var timer = null;
timer = setTimeout(function (){
    alert(1)
},1000)
console.log(timer)  // 1

tiemr = setTimeout(function(){
    console.log('第二个定时器')
},1000)
console.log(tiemr)  // 2

如何清除定时器呢，上面代码中已经定时器返回值存入到timer,直接clearTimeout(timer) 就可以清除第二个定时器了，也就是说第二个定时器中的代码不会再执行。

间隔定时器的清除方法 和 延迟定时器一样的

var timer2 = null;
var num = 0;
timer2 = setInterval(function (){
    num++
    console.log(num)
},500)

clearInterval(timer)

关于定时器的执行顺序

定时器是异步的，也就是说定时其中的代码不会影响到它后面代码的执行，举个例子:

setTimeout(function(){
    console.log(1)
},1000)
console.log(2)

代码会先打印 2，1s后再打印 1，即使时间设置为 0，结果也是先打印2，后打印1。这是因为在浏览器中，setTimeout()/setInterval()的每调用一次定时器的最小间隔是4ms

注意：定时器中的回调函数中的this 是指向window的

setTimeout(function (){
    console.log(this)   // window
},0)

mdn详细文档介绍：
https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...
https://developer.mozilla.org...