定时器

Posted 2020-08-31 开发的点点滴滴

setTimeout，setInterval并不是多线程，只是浏览器提供的一个定时的事件触发器，让js代码在浏览器中延时执行。

setTimeout：延时delay毫秒之后，直接将将定时器任务加入事件队列，只加一次。

setInerval：每延时delay毫秒之后，浏览器尝试将定时器任务加入事件队列。如果事件队列中已经存在该timer未执行的消息，则该回调会被丢弃，不再添加。否则，会出现多个回调同时在队列等待执行的情况。

定时器只负责到时往队列中加入消息，具体执行时间要看队列中的消息排队情况。所以setTimeout(fun, 0)并不意味着立即执行。

事件消息无论何时添加，总是优先于定时器消息执行。

$(‘#ele1‘).on(‘click‘, function () {
    var oldTime = new Date().getTime();
    while (new Date().getTime() - oldTime < 2000) { }
    console.log(‘clickEvent1‘);
});
$(‘#ele2‘).on(‘click‘, function () {
    var oldTime = new Date().getTime();
    while (new Date().getTime() - oldTime < 2000) { }
    console.log(‘clickEvent2‘);
});
var timer = setTimeout(function () {
    console.log(‘timerEvent‘);
}, 0)
$(‘#ele1‘).click();
$(‘#ele2‘).click();
$(‘#ele1‘).click();
//输出clickEvent1,clickEvent2,clickEvent1,timerEvent

如果执行时间长，setInterval会导致两次回调间没有delay，这时可以采用链式调用setTimeout来取代setInterval。

function timer(fn,delay){
    var s=setTimeout(function(){
        　　fn();
        　　timer(fn,delay);    //回调执行完重新触发定时器，避免了连续的队列延迟产生的叠加
    　　},delay) 
}     

或

var timer=setTimeout(function () {
    //业务逻辑
    timer=setTimeout(arguments.callee, interval);
}, interval)
//为了在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔，也保证了在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。

另外：建议使用requestAnimationFrame(RAF)或者直接采用CSS来写页面动画，不要使用定时器。requestAnimationFrame比起setTimeout、setInterval的优势主要有两点：

1.requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2.在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量