高级定时器

使用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

  

原文地址:https://www.cnblogs.com/xwtbk/p/6862441.html