理解setTimeout和setInterval

setTimeout和setInterval，这两个js函数都是用来定时执行。setTimeout执行一次，setInterval执行多次。

问题出现在今天，使用setInterval是，设置执行速度为1ms。这时setInterval就出现了延迟。它并没有严格按照1ms的速度执行。

　　var speed1=1;        
　　task1 = setInterval(function(){
            var val1=parseInt(document.getElementById('font1').innerHTML);
            if(val1>0 && val1<=15){
                val1--;
                document.getElementById('font1').innerHTML=val1;
            }else{
                clearInterval(task1);
            }
        },speed1);

 

问题的原因要从javascript的单线程机制说起。对于长时间执行的任务设置短暂的时间间隔，那么在第一次执行完成之前，可能会由于执行不断的迭代造成延迟。因为setInterval的回调函数并不是到时后立即执行,而是等系统资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害。

　　其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。 
而如何计算插入的时间点呢？自然是要用到我们所说的timer，也就是计时器。当执行setTimeout和setInterval的时候，timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时，就触发timer callback，也就是我们设定的回调函数。事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行（或者说异步执行）。所谓的异步只是一个假象——它同样运行在一个线程上！