深入:定时器原理

js是单线程执行的,在页面下载完成后,代码运行、事件处理程序,包括ajax都是在同样的线程中执行。浏览器负责排序某段代码在某个时间点运行。在页面的生命周期中,不同时间可能会有其他代码在控制js进程,定时器代码也在其中。

定时器是计划代码在未来的某个时间执行,并不是单独的线程。而定时器执行的时机是不能保证的。

**定时器队列的工作方式:**当特定的时间过后将代码插入。但并不意味着代码会立即执行,只能是尽快执行。设定300ms后执行的定时器不代表到了300ms就一定会执行,因为队列中可能还会有其他代码正在执行。只有当其他的代码执行完后,定时器中的代码才会执行。

**tips:**定时器指定的时间间隔表示何时将定时器的代码添加到队列,而不是何时执行代码。

####重复的定时器
重复的定时器setInterval()的重复规则存在两个问题:1.某些间隔会跳过。当执定时器中代码的时间比间隔时间更长时;2.多个定时器的代码执行之间的间隔可能会比预期小。

代码:

setTimeout(function() {
      var div = document.getElementById("myDiv"),
          left = parseInt(div.style.left) + 5;
          div.style.left = left + "px";
      if(left < 200) {
           setTimeout(arguments.callee, 500);
      }
 }, 50);

这段代码可以控制元素的动画,”myDiv"元素每隔一定时间向右移动,在在左座标200像素的时候停止。

代码分析:每次执行函数的时候都会创建一个新的定时器。

####代码执行队列
每个浏览器窗口、标签页、或者frame都有各自的代码执行队列。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章