关于 setTimeout 和 setInterval 的理解

关于 setTimeout 和 setInterval 的理解

定时器对队列的工作方式是，当特定的时间过去后将代码插入。注意，给队列添加代码并不意味着对它立刻执行，而只能表示它会尽快执行。设定一个 150 ms 后执行的定时器不代表到了 150ms 后代码立即执行，它表示在 150 ms后，代码被放入队列中。如果这个时间段，队列没有其他要执行的程序，则执行定时器，如果有，则等待其他程序执行完之后执行定时器程序。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　 -———《JavaScript高级程序设计》

一、setTimeout 和 setInterval 的区别

setTimeout 和 setInterval 都是异步执行

1 . setTimeout

/* 表示在 200 ms 后执行 func 函数 */

/* 第一种写法 */
setTimeout(func,200)

/* 第二种写法，可以给func传参 */
setTimeout("func(arg)",200)

/* 清除定时器 */
var timeId = setTimeout("func(arg)",200)
clearTimeout(timeId)

2 . setInterval

/* 表示每 200 ms 执行一次 func 函数,是个重复定时器 */

/* 第一种写法 */
setInterval(func,200)

/* 第二种写法，可以给func传参 */
setInterval("func(arg)",200)

/* 清除定时器 */
var timeId = setTimeout("func(arg)",200)
cleartInterval (timeId)

二、使用 setTimeout 实现 setInterval

　　为什么使用我们要使用 setTimeout 实现 setInterval 呢？因为 setInterval 在使用中存在两个问题：（1） 某些事件间隔被跳过（事件处理程序与定时器的执行时间相差无几时）；（2）多个定时器的代码执行时间可能会比预期时间少。
　　使用 setTimeout 实现的 setInterval ，这样做的好处是，在前一个定时器执行完成之前，不会向队列中添加新的定时器，确保不会缺少时间间隔；保证在下一个定时器执行之前，至少等待指定毫秒的间隔，避免了连续运行

setTimeout(function(){
    //doSomething
    setTimeout(arguments.callee,interval)  // arguments.callee获取对当前执行的函数的引用，并未其设置一个定时器
},interval)

经典面试题

var i = 0;
setTimeout(function() {
    console.log(i);
}, 0);
console.log(i);
i++;
setTimeout(function() {
    console.log(i);
}, 0);
console.log(i);
i++;
setTimeout(function() {
    console.log(i);
}, 0);
console.log(i);
i++;

// 输出： 0 1 2 3 3 3

参考文献

1. 《javascript高级程序设计》
2. http://www.cnblogs.com/destinyruru/p/5823760.html