高级定时器

最新推荐文章于 2024-09-09 19:08:53 发布

原创最新推荐文章于 2024-09-09 19:08:53 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#高级定时器

原生js 专栏收录该内容

165 篇文章

订阅专栏

本文介绍了setInterval和setTimeout的区别，前者是定时器，会连续执行；后者是延时器，只执行一次。还阐述了高级定时器将代码插入队列的工作方式，指出重复定时器存在间隔跳过和间隔过小问题，可用setTimeout链式调用避免。

首先需要说明一下setInterval和setTimeout的区别：

setInterval是定时器，定时器在指定的时间连续不断的执行。
setTimeout是延时器，延时器在指定的时间内，只执行一次。
高级定时器
定时器对队列的工作方式是，当特定时间过去后将代码插入。

关于定时器最重要的事情是：
指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码。

提问：
执行完一套代码之后，JavaScript进程返回一段很短的时间，这样页面上的其他处理就可以进行了？
由于JavaScript进程会阻塞其他页面处理，所以必须有这些小间隔来防止用户界面被锁定。这样设置一个定时器，可以确保在定时器代码在执行前至少有一个进程间隔。

重复的定时器
重复定时器的规则存在两个问题：

某些间隔会被跳过；
多个定时器的代码执行之间的间隔可能会被预期的小。

为了避免重复定时器的这两个缺点，可以用setTimeout链式调用。

btn.onclick = function(){
    setTimeout(function(){
        for(var i=0;i<10000000000;i++){

        }
        console.log(1);
        setTimeout(arguments.callee,100);
    },100)
}

我们会发现，虽然是100ms，但是执行是一个接一个执行的，第一个执行完之后才会执行第二个。
这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续运动。这个模式主要用于重复定时器。