来源自:Tianhao Cui
概念
JavaScript的定时器不是线程,JavaScript是运行于单线程的环境中的,而定时器仅仅只是计划代码在未来的某个时间执行。
实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级。
JavaScript进程线
可以想象JavaScript在一条时间轴上运行。
页面载入时,首先执行任何包含在<script>
元素内部的代码。在这之后,JavaScript
进程将等待更多代码执行。当进程空闲的时候,下一个代码会被触发并立刻执行。
例如:当点击某个按钮时,onclick
事件就会立即执行,只要JavaScript进程处于空闲状态
除了主JavaScript执行进程外,还有一个需要在进程下一次空闲时执行的代码队列。随着页面在其生命周期中的推移,代码会按照执行顺序添加入队列。
这就意味着,任何代码都会先经过队列,然后再在后面可能的时刻被添加到进程中执行。即没有任何代码是真正意义上的立即执行。
定时器
定时器对队列的工作方式是,当特定时间过去后将代码插入。
给队列添加代码不意味着代码立即执行,这只表示在150ms后代码会被添加到队列中。
var btn = document.getElementById("my-btn");
btn.onclick = function() {
setTimeout(function(){
document.getElementById("message").style.visibility = 'visible';
}, 250);
}
点击按钮后,首先将onclick
事件处理程序加入队列。待该程序执行后,才设置定时器。再有250ms后,制定代码才被添加到队列中等待执行。
虽然在255ms时定时器代码被添加至队列,但此时JavaScript进程并非空间,因此至少要等到onclick事件执行完毕后,定时器程序才会执行
重复的定时器
当使用setInterval()
时,仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。
但仍存在两个问题
- 某些间隔会被跳过
- 多个定时器的代码执行之间的间隔可能会比预期小
第一个定时器在205ms处添加到队列,但是要直到过了300ms这一点才能执行,在执行这个定时器代码时,在405ms处又添加了一个定时器代码。在605ms处,第一个定时器代码还在运行,同时队列中已经有了一个定时器代码的实例,所以在这个时间点上的定时器代码不会被添加到队列中。结果5ms添加的定时器代码执行结束后,405ms时添加的定时器代码就立刻执行。(这里有些绕,可以自己画一画,帮助理解)
解决方案
为了避免setInterval
的这两个缺点,可以用链式setTimeout
调用
setTimeout(function() {
// 其他代码
setTimeout(arguments.callee, interval);
}, interval);
这样在前一个定时器代码执行完成之前,都不会再向队列插入新的定时器代码。
总结
需要使用JavaScript的定时器严格按一定时间间隔执行一段程序时,最好使用setTimeout
来模拟setInterval
。