这里主要介绍常用的setTimeout 和 setInterval。
- 两个共同点：
-
setTimeout和setInterval这两个定时器一旦触发，就是和js程序并行执行的，也就是他们并不在一个时间线上。计时器的作用是仅仅是做一个计划，那就是每隔一段时间执行一次目标方法。<b>下面的例子就证明了这一点，17ms之前，程序走就执行到了下面。</b>
var t = null;
var f = null;
var i = 0;function a() { i++; if (i == 20) { return; } t = setTimeout(a, 17); } a(); console.log(i); // 1
- 两个本质上的不同:异步调用运行机制不同
-
setTimeout异步运行过程
btn.onclick = function(){ setTimeout(function(){ console.log(1); },250); }
<b>如果上面代码中的onclick事件处理程序执行了300ms，那么定时器的代码至少要在定时器设置之后的300ms后才会被执行。队列中所有的代码都要等到javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的.</b>
- setInterval导致两个问题：1、某些间隔被跳过；2、多个定时器的代码执行之间的间隔可能比预期的小。
<b>假设，某个onclick事件处理程序使用serInterval()设置了200ms间隔的定时器。如果事件处理程序花了300ms多一点时间完成，同时定时器代码也花了差不多的时间，就会同时出现跳过某间隔的情况</b>- <b>通俗来讲，setInterval会严格按照规定时间准备事件，不管执不执行，但是队列中只能有一个队列未执行，如果插入的时候发现多了就取消这次事件排队。</b>
3、为了避免setInterval()定时器的问题，可以使用链式setTimeout()调用。
setTimeout(function fn(){
setTimeout(fn,interval);
},interval);
<b>这个模式链式调用了setTimeout()，每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用当前执行的函数，并为其设置另外一个定时器。这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。</b>
