setTimeout & setInterval

那到底是setTimeout好还是setInterval 好呢。其实毫无疑问的，setTimeout比较好。setTimeout是在设定的时间后执行一次指定方法，而setInterval是每隔一定的时间久执行指定方法。可能很多人会存在疑问，这样不是setInterval更好吗，直接就可以实现循环了，setTimeout还要用递归实现循环。没错，setInterval实现循环更简单，但是却不是更好。

因为：

• 无论是setTimeout还是setInterval，触发时，如果当前进程不为空，都得去排队等待执行，这一点上是无差异的。
• 区别是，setTimeout只需排一次队，setInterval则需要按照预设的间隔时间，每到时间点都去排一下。
• setInterval去排队时，如果发现自己还在队列中未执行，则会被drop掉。也就是说，同一个Interval，在队列里只会有一个。
• 因为队列机制，无论是setTimeout还是setInterval，第一次触发时的时间，只会等于大于预设时间，不可能小于。
• 对于setInterval来说，如果执行时间大于预设间隔时间，很可能导致连续执行，中间没有时间间隔，这是很糟糕的，很可能会耗费大量cpu.

所以对于动画来说，如果单帧的执行时间大于间隔时间，用setTimeout比用setInterval更保险。

于是利用setTimeout这样实现了游戏循环：

setTimeout(function(){
//循环体
 setTimeout(arguments.callee, 10);
},10);

不过，真的这样简单吗？要知道javascript是单线程的，当要处理的事务比较多时，setTimeout的执行时间根本得不到保证，这样在不同性能的浏览器上就会有不同的表现了。这时我们可以利用时间差来控制循环体的执行时间。

    var _last = new Date().getTime();
    setTimeout(function(){
    var _now = new Date().getTime();
    if(_now - _last > delay){
    _last = _now;
    //循环体…
    }
    setTimeout(arguments.callee, 10);
    },10);

这样，循环体执行的时间间隔就比较精准了。

转载地址：http://www.w3cfuns.com/article-1293-1.html