setTimeout初探(三)：失焦的窗口

      当浏览器的窗口失去焦点时，窗口中的所有定时任务(包括setTimeout、setInterval, requestAnimationFrame)都会暂停，只有当窗口再次被激活时，其中的定时任务才会继续运行。需要指出的是，IE浏览器不会出现这种现象。
      以下两种情况，浏览器的窗口必定会失去焦点，进入背景运行状态。

1. 在同一个浏览器窗口中，发生了浏览器的Tab页切换，请注意，是浏览器的Tab页切换，并非窗口内容中的Tab组件切换。
2. 最小化浏览器窗口。

      假定页面中存在一个ID为output的H1元素，测试此现象的interval示例代码如下：

var output= d3.select("#output"),
    now, //  用于计算花费的时间
    timer, //  用于获得定时器引用
    count = 0;
//  定义刷新视图的函数    
function refreshFrame() {
    if(count < 500) {
        //  更新视图数据
        output.text(count ++);
        count ++
    } else {
        clearInterval(timer);
        //  开始以为是HTML元素内容更新引起浏览器的重新渲染导致的，
        //  将更新视图数据的代码移动到此处，但依旧会出现定时任务暂停现象
        //  output.text(count);
        alert(Date.now() - now);  // 统计花费的时间
    }
}
//  开始计时
now = Date.now();
timer = setInterval(refreshFrame, 16);  

      在浏览器中预览上面的代码，任务开始后，切换浏览器的Tab页或者最小化窗口，都会发生定时任务暂停现象，只要发生暂停的现象，最后得到的时间远远超过8000ms。
      最后，附上setTimeout与requestAnimationFrame的测试代码，更容易复现此等现象。

var output= d3.select("#output"),
    now, //  用于计算花费的时间
    timer, //  用于获得定时器引用
    count = 0;
//  定义刷新视图的函数      
function refreshFrame() {
    if(count < 500) {
        output.text(count ++);
        count ++
        //  启动下一次定时任务
        setTimeout(refreshFrame, 16)
        //  requestAnimationFrame(refreshFrame)
    } else {
        // 统计总共花费的时间
        console.timeEnd("Animation")
    }
}
//  延迟5秒后启动，如果此时窗口就失去焦点，你会发现，定时任务都根本不会启动
setTimeout(function() {
    console.time("Animation")
    refreshFrame();
}, 5000);