setTimeout 和 setInterval 你真的知道了吗

最近群里的人在讨论setTimeout 和 setInterval这个两个方法，上次我写了片关于settimeout第一个参数的文章。今天是讲它们两个执行的实际情况。

顾名思义，setTimeout是一个定时器，定时触发一次。setInterval是间隔触发多次，直到被结束。

javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行。而且setTimeout和setInterval还有点不一样.

1.setTimeout

function click(){
      setTimeout(function() { 
            alert("setTimeout");
        }, 200); 

        for(var i=0;i<10000;i++){
            console.log(i);
        }
            alert("end");
    }

我在Chrome和IE中都测试了，先弹出"end"再弹出"setTimeout"。这能说明什么问题呢？上面给定时器设置200毫秒之后触发，下面for循环了10000次。在我测试的时候，我在Chrome下是循环了100W次，目的是让for循环占用代码执行的时间，明显的大于200毫秒，这个for循环完成要占用几秒钟的时间。按道理说在click之后200毫秒应该会弹出"setTimeout"，但实际上setTimeout插入队列的代码会在click中的代码执行完成之后再执行。所以啊，定时器也不是那么准时的。但是当click里面的代码执行时间小于200毫秒，那么定时器还是会给定的时间促发的。

2.setInterval

这里可能会存在两个问题:
1.时间间隔或许会跳过
2.时间间隔可能<定时调用的代码的执行时间

function click() { 
// code block1... 
setInterval(function() { 
// process ... 
}, 200); 
// code block2 
} 

比如onclick要300ms执行完, block1代码执行完, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来, 可能你还会认为代码队列后面又会继续插入一份process代码...真实的情况是,由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被"无情"的跳过, 因为js引擎只允许有一份未执行的process代码

为了避免setInterval不执行规定的代码，可以用setTimeout来代替

setTimeout(function(){ 
    //processing 
    setTimeout(arguments.callee, interval); 
}, interval);

参考：http://www.jb51.net/article/26679.htm