JS定时器知多少

在JavaScript中,定时器是一个经常被误用且不被大家所熟识的特性。但在构建应用时其却非常有用。
定时器提供了一种让一段代码在一定的时间之后运行的能力。由于JS的单线程特性,其同一时间只能执行一处代码,而定时器跳出了这一性质,以其特有的方式来执行代码。

在浏览器环境当中,window对象下有两组方法,setTimeOut()/clearTimeOut()以及setInterval()/clearInterval()分别用于设置定时器让其在一段时间后执行/让其停止和每隔一段时间就会执行一次/清除该定时器。
比如下面的代码:

1
2
3
4
5
6
setTimeOut(function(){
// do somethign
}, 1000);
setInterval(function(){
// do this code every 1s
}, 1000);

上面的代码分别创建了一个一次执行定时器和循环执行的定时器,每隔一秒钟,function就会被执行一遍

咋一看,setInterval就像周期性执行setTimeout一样,但是他们有很多不同之处。
举个栗子:

1
2
3
4
5
6
setTimeOut(function repect(){
setTimeOut(repect, 100);
}, 100);
setInterval(function(){
// do some thing
}, 100)

上面两段代码的功能几乎是一样的,但是实际上却不是。setTimeOut()代码中执行前一个回调结束后100毫秒甚至更多,才会执行下一个回调
而setInterval()不一样,每隔100毫秒就会尝试执行,不会受到前面回调的影响。那为什么执行一个setTimeOut()执行回调的时间会更长呢?因为js单线程的特性,当计时时间到,回调函数会被放入执行队列排队,并且执行回调是需要时间的,所以执行时间只会大于设置的时间。setInterval()也一样,但有一点,由于其不关注前一个回调执行的情况,如果一直被延迟,那么setInterval()在可用后会无延迟执行。

好吧,写个栗子证明一下上面的结论:

1
2
3
4
5

console.time('测试setTimeOut执行的时间')
setTimeOut(function(){
console.timeEnd('测试setTimeOut执行的时间');
},1000);

执行结果为:
测试setTimeOut执行的时间: 1004.673ms

关于setInterval()的演示和清除定时器的演示这里就不做了。

分享到 评论