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只是简简单单地通过插入代码到代码队列来实现代码的延迟执行(或者说异步执行)。所谓的异步只是一个假象——它同样运行在一个线程上!