理解javascript计时器的工作原理
由于javascript是单线程的，从下面的三个函数开始，去构造和操作计时器。
js计时器事件用到的函数：
理解计时器的内部工作原理，一个非常重要的概念：
计时器设定的延时是没有保证的。
因为所有在浏览器中执行的javascript单线程异步事件（比如鼠标点击事件和计时器）都只有在它有空的时候才执行。
比如第一段javascript执行了大概18毫秒，鼠标点击事件大概执行了11毫秒。
由于javascript每次只能执行一段代码（基于它单线程的特性），所以所有这些代码段都阻塞了其他异步事件的执行。这就意味着，当一件异步事件（比如鼠标点击，计时器触发和一个xmlhttprequest 请求完成）触发的时候，这些事件的回调函数将排在执行队列的最后去等待执行（排队的方式因浏览器不同而不同，这里只是一个简化）。
一开始，在第一段代码段内，两个计时器被初始化：一个10ms的settimeout 和一个10ms的setinterval。由于计时器在哪儿初始化就在那儿开始计时，所以实际上计时器在第一段代码执行完成之前就触发了。然而，计时器的回调函数并不是立即执行了（单线程限制了不能这样做），相反的是，回调函数排在了执行队列的最后，等到下一个有空的时间去执行。
此外，在第一个代码块内我们看到了一个鼠标点击事件发生了。与之相关的javascript异步事件（我们不可能预测用户会在什么时候去采取这样的动作，因此这个事件被视为异步的）并不会立即执行。和计时器一样的是，它被放到了队列的最后去等待执行。
在第一个代码快执行完成的时候，浏览器会立即发出这样的询问：谁正在等待执行？这个时候，鼠标点击处理程序和计时器回调函数都在等待执行。浏览器选择了其中一个（鼠标点击回调函数）并且立即执行它。为了执行，计时器会等到下一个可能执行的时间。
我们注意到，当鼠标点击事件对应的处理程序正在执行的时候，第一个定时回调函数也要执行了。同定时计时器一样，它也在队列的后面等待执行。然而，我们可以注意到，当定时器再一次触发（在计时器回调函数正在执行的时候），这一次定时器回调函数被丢弃了。如果在执行一大块代码块的时候，你把所有的定时回调函数都放在队列的最后，结果就是一大串定时回调函数将会没有间隔的一起执行，直到完成。相反，在把更多定时回调函数放到队列之前，浏览器会静静的等待，知道队列中的所有定时回调函数都执行完成。
事实上，我们可以看到，当interval回调函数正在执行的时候,interval第三次被触发。这给我们一个很重要的信息：interval并不关心当前谁在执行，它的回调函数会不加区分地进入队列，即使存在这个回调函数会被丢弃的可能。
最后，当第二个定时回调函数完成执行的时候，我们可以看到javascript引擎已经没有什么需要执行了。这意味着，浏览器现在正在等待一个新的异步事件的发生。我们可以看到在50ms的时候，定时回调函数再一次被触发。然而，这一次，没有其他代码阻塞他的执行了，所以他立即执行了定时回调函数。
例子，理解settimeout 和setinterval的区别。
第一眼看上去这两段代码在功能上是等价的，但事实上却不是。
注意，settimeout 这段代码会在每次回调函数执行之后至少需要延时10ms再去执行一次（可能是更多，但是不会少）。
但是setinterval会每隔10ms就去尝试执行一次回调函数，不管上一个回调函数是不是还在执行。
概括：
javascript引擎只有一个线程，迫使异步事件只能加入队列去等待执行。
在执行异步代码的时候，settimeout 和setinterval 是有着本质区别的。
如果计时器被正在执行的代码阻塞了，它将会进入队列的尾部去等待执行直到下一次可能执行的时间出现（可能超过设定的延时时间）。
如果interval回调函数执行需要花很长时间的话(比指定的延时长)，interval有可能没有延迟背靠背地执行。
上述这一切对于理解js引擎是如果工作的无疑是很重要的知识，尤其是大量的典型的异步事件发生时，对于构建一个高效的应用代码片段来说是一个非常有利的基础。
写了一个demo，运行在nodejs环境下（浏览器不容易模拟）
var starttime = new date();
//初始化计时器
var start = settimeout(function() {
var end = new date();
console.log('10ms的计时器执行完成，距离程序开始' + (end - start) + 'ms');
}, 10);
//模拟鼠标点击事件
function asyncreal(data, callback) {
process.nexttick(function() {
callback();
});
}
var asyncstart = new date();
asyncreal('yuanzm', function() {
var asyncend = new date();
console.log('模拟鼠标执行事件完成，花费时间' + (asyncend - asyncstart) + 'ms');
})
//设定定时器
count = 1;
var interval = setinterval(function() {
++count;
if(count === 5) {
clearinterval(interval);
}
console.log('定时器事件');
},10);
//模拟第一阶段代码执行
var first = [];
var start = new date();
for(var i = 0;i < 10000000;i++){
first.push(i);
}
var end = new date();
console.log('第一阶段代码执行完成,用时' + (end - start) + 'ms');
解释：
1、一开始设定的计时器并不是在10ms后立即执行，而是被添加到了队列后面，等到第一阶段代码执行完成才执行，距离开始的时间也不是设定的10ms。
2、鼠标点击事件同样因为是异步事件，添加到了队列后面，等到第一阶段代码执行完成的时候才执行。
3、鼠标点击事件先于计时器事件添加到队列后面。
4、最后定时器才能执行。