深入理解定时器:setTimeout与setInterval

javascript/jquery

浏览数:762

2017-5-25

AD:资源代下载服务

setTimeout

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(function(){
    console.log('hello')
},1000)

这段代码将会在1s后在控制台出‘hello’,setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。

setTimeout创建的定时器会返回一个ID值,利用这个ID值配合cleartimeout可以取消要延迟执行的代码块:

var t =setTimeout(function(){
    alert('hello')
},1000)
clearTimeout(t)

setInterval

setInterval()与setTimeout()相同,区别在于后者是重复性的检测和执行:

var t = setInterval(function(){
    console.log('hello')
},1000)

上面的代码每隔1s在控制台输出‘ hello’

setInterval创建的定时器可以使用clearInterval取消

// ...
clearInterval(t)

定时器的问题

setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过期了4ms,那么是不是说setInterval就是准确的呢?

然而并不是,setInterval存在两个问题:

1、时间间隔可能会跳过
2、时间间隔可能小于定时器设定的时间
请看以下代码

function click() { 
    // code block1... 
    setInterval(function() { 
        // process ... 
    }, 200); 
    // code block2 
}

我们假设通过一个click, 触发了setInterval以实现每隔一个时间段执行process代码

在205ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, process代码开始执行, 然而process代码执行的时间超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点
下面问题来了, 由于代码队列中已经有了一份未执行的process代码(405m时插入的), 所以605ms这个插入时间点将会被跳过, 因为js引擎只允许有一份未执行的process代码

为了避免这种情况可以使用setTimeout递归调用
代码如下:

setTimeout(function(){ 
    // processing 
    setTimeout(arguments.callee, interval); 
}, interval);

每次函数执行的时候都会创建一个新的定时器,第二个setTimeout调用使用了arguments.callee来获取对当前执行的函数的引用,并为其设置另外一个定时器。这样做是为了在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔,也保证了在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。

原文地址:https://mp.weixin.qq.com/s/zVp6fygqiquwdR59Y44p4Q