谈谈javascript中的定时器
最近写一些JS动画，常用到JS中的定时器(setTimeout & set Interval)，查找相关资料，有些心得与大家一起分享。
使用setTimeout & set Interval创建的定时器可以实现有趣且有用的功能，初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。浏览器只是负责进行排序，指派某个代码在某个时间点运行。
下面说下Javascript线程，下图表示javascript进程时间线。
除了javascript执行进程外，还有一个需要在进程下一次空闲时间执行的代码队列，随着页面在其生命周期内的推移，代码会按照执行顺序添加到对列中，例如：当一个按钮被按下时，它的事件处理就会添加到队列中，并在下一个可能的时间内执行。
定时器对队列的工作方式是，当特定的时间过去后，将代码插入，注意添加到队列并不意味着它会马上执行，而只能说它会尽快执行，设定一个250ms后执行的定时器，不代表250ms后它会马上执行，它只会表示在150ms后被加入到队列中，如果这个时间点队列是空闲的，那么这段代码就会被执行。
请看以下代码：
var btn = document.getElementById("mybtn");
btn.onclick = function () {
setTimeout(function () {
document.getElementById("message").nodeName = "mymessage";
//其它代码
}, 250);
}
对于定时器最要注意的是：指定的时间间隔表示何时将定时器的代码添加到队列中，而不是何时执行代码。关于这个onclick事伯处理的进程时间线请看下图：
<script type="text/javascript">
var c = 0
var t
function timedCount() {
document.getElementById('txt').value = c
c = c + 1
t = setTimeout("timedCount()", 1000)
}
function stopCount() {
clearTimeout(t)
}
</script>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
关于重复定时器，我们既可以使用setTimeout来重复创建就时器，也可以直接用setInterval，使用setInterval创建的定时器确保了定时器规则地插入队列中，这个方式问题在于代码可能在再次添加到队列之前还没有完成执行，可能寻到定时器重复运行好几次，而中间没有停顿，然而现在的javascript引擎很聪明，能避免这个问题，当使用setInterval时，仅当没有定时器的任何其它代码时，才将定时器代码添加到队列中，这样会确保定时器代码加入到队列的时间的间隔是为指定的间隔，请注意这只是加入队列的时间间隔，并不是执行代码的时间间隔，所以使用setInterval还是会存在两个问题：（1）某些间隔会被跳过了（2）多个定时器的代码执行间隔可能会比预期的要小。
为避免这些问题，可以使用如下模式使用链式setTimeout调用：
setTimeout(function () {
//处理中
setTimeout(arguments.callee, interval);
}, interval)
在上面的计时DEMO中也是使用此模式来做循环的。
