高级定时器
使用setTimeout()和setInterval()创建的定时器可以实现有用的功能。
但是定时器仅仅是计划代码在未来某个时刻执行。
执行时间是不确定的,因为在页面的生命周期中,还有其他的代码在控制javascript进程。
定时器对队列的工作方式是当特定时间过去后,让代码尽快执行,而不是立即执行。一旦队列中空闲之后,代码将立即执行。
表面上看上去,代码是在特定的时间执行了,其他情况下,代码明显的等待更长的时间。
var btn = document.getElementById("my_btn"); btn.onclick = function(){ setTimeout(function(){ document.getElementById("message").style.visibility = 'visible'; },200) //其他代码 }
这里给一个按钮一个事件处理程序,首先onclick事件处理程序加入队列,该程序执行后执行定时器,再有200ms后,指定的代码被加入队列。
加入队列并不是立即执行代码,如果onclick执行了300ms,那么,定时器的代码至少在定时器设置300ms之后才会执行。
这就需要传递一个实际执行的时间与指定的间隔的差值
setTimeout(function(diff){ if(diff > 0){ //晚调用 }else if(diff < 0){ //早调用 } else { //调用及时 } },2