最近群里的人在讨论setTimeout 和 setInterval这个两个方法，上次我写了片关于settimeout第一个参数的文章。今天是讲它们两个执行的实际情况。
顾名思义，setTimeout是一个定时器，定时触发一次。setInterval是间隔触发多次，直到被结束。
javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行。而且setTimeout和setInterval还有点不一样.
1.setTimeout
function click(){ setTimeout(function() { alert("setTimeout"); }, 200); for(var i=0;i<10000;i++){ console.log(i); } alert("end"); } 我在Chrome和IE中都测试了，先弹出"end"再弹出"setTimeout"。这能说明什么问题呢？上面给定时器设置200毫秒之后触发，下面for循环了10000次。在我测试的时候，我在Chrome下是循环了100W次，目的是让for循环占用代码执行的时间，明显的大于200毫秒，这个for循环完成要占用几秒钟的时间。按道理说在click之后200毫秒应该会弹出"setTimeout"，但实际上setTimeout插入队列的代码会在click中的代码执行完成之后再执行。所以啊，定时器也不是那么准时的。但是当click里面的代码执行时间小于200毫秒，那么定时器还是会给定的时间促发的。
2.setInterval
这里可能会存在两个问题:
1.时间间隔或许会跳过 2.时间间隔可能<定时调用的代码的执行时间function click() { // code block1... setInterval(function() { // process ... }, 200); // code block2 } 
比如onclick要300ms执行完, block1代码执行完, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来, 可能你还会认为代码队列后面又会继续插入一份process代码...真实的情况是,由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被"无情"的跳过, 因为js引擎只允许有一份未执行的process代码
为了避免setInterval不执行规定的代码，可以用setTimeout来代替
setTimeout(function(){ //processing setTimeout(arguments.callee, interval); }, interval);