javascript中的定时器-CSDN博客

本文链接：https://blog.csdn.net/duichenluan/article/details/45478673

1. 最小运行时间间隔

　　在setTimeout()和setInterval()我们能够设定时间间隔，来让下个事件大致发生在哪个时间段。假如我们设置时间间隔是0的话，那是不是就会在0ms之后执行呢，也就是立即执行。我们可以采用下面的代码输出一下：

function get(){
    var timer = null;
    var date = null;
    var diff = 0;
    var last = 0;
    var now = 0;
    var nums = 0;
    var color = '#000';
    var process = document.getElementById("process");
    timer = setInterval(function(){
        date = new Date();
        now = date.getTime();
        diff = now-last; // 前后两个时间差
        last = now;
        nums++;
        color = diff===0?'#f00':'#000';
        process.innerHTML += '<p>'+now+' (<span style="color:'+color+'">'+diff+'</span>)</p>';

        if(nums>=100){
            clearInterval(timer);
        }
    }, 0);
}
get();

　　我们把每次执行setInterval()前后的时间差打印到屏幕中（以下数据使用chrome 42.0.2311.90版本测试）：

1429545782409 (1)    
1429545782412 (3)    
1429545782414 (2)    
1429545782420 (6)    
1429545782425 (5)    
1429545782430 (5)    
1429545782437 (7)    
1429545782443 (6)
1429545782449 (6)    
1429545782454 (5)    
1429545782460 (6)
1429545782466 (6)
1429545782471 (5)
1429545782476 (5)
...

　　从打印出的数据可以看出，setInterval()的时间间隔为0ms时，输出的时间差基本都在1~10ms之间，也是能在可以接受的范围内。IE11下的测试与chrome的数据基本一致，而在firefox下能够出现0的时间差。

　　2. 标签不可见时的定时器间隔

　　其实不管是把时间间隔设定为0ms还是其他的时间间隔，运行时都会有时间误差的，比设定的间隔多1~16ms毫秒左右，有的时候还会相差更多。

　　我们有时会在某个场合对标题进行闪动，提示给用户当前标签页有新消息产生：

var backup = document.title; // 存储原标题
function blink(){
    document.title = document.title == backup? "【有新消息】" : backup;            
}
blink();
timer = setInterval(blink, 500);

　　上面的代码能够进行500ms的标题轮流闪动，当我们处在当前标签页时，基本感觉不出定时器产生的误差。可是如果我们切换到其他的标签页或者最小化时，我们就能够看到，标题的闪动变慢了很多，差不多提升到1000ms左右了。

　　为了更加准确的记录时间间隔的变化，我们特此将上面的代码进行如下的补充，标题进行闪动时记录当前的毫秒时间戳，同时标记出当前标签页可见时的状态和不可见时的状态【查看演示】：

 
   
 View Code 

　　运行后，我们能够看到程序记录下的数据有（以下仅是部分数据）：

1429547223336 (505)   
1429547223837 (501)    
====== 离开 ======    
1429547225296 (1459)    
1429547226296 (1000)  
1429547227296 (1000)   
1429547228297 (1001)  
++++++ 回来 ++++++   
1429547229137 (840)    
1429547229637 (500)

　　我们很清楚的看到，当标签页不可见时（“离开”后），时间差上升了1000ms左右；标签页可见时（“回来”后），时间差又恢复到了500ms左右。不过在标签页刚切换完的时候，时间差的变化比较大，后来就趋于稳定了。其实浏览器为了在标签页不可见时减少CPU的利用率和电池等的消耗，特地将时间间隔进行提高。

　　不过这里要指出的是，在IE11下，标签的可见状态不会影响定时器的时间间隔。