JS高级定时器

   相信使用过setTimeout()和setInterval()创建定时器的都知道可以实现一些有趣好玩的功能，但是肯定也是遇到过一些问题，或者是对JavaScript的定时器存在一定的误解。以下是根据我使用过的定时器和高程3里面高级定时器一节的整理

• javascript是运行在单线程的环境中的。而定时器仅仅是计划代码在未来的某个时间执行，并不能保证执行的时间，原因是在页面的生命周期中，不同时间有可能有其他代码在控制javascript线程。
  
  
• 关于定时器要记住最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码。
  
  

一.setTimeout()

• 1.setTimeout(),方法用于在指定的毫秒数后调用函数或计算表达式,只执行 code 一次。

• 2.栗子：给oBtn按钮设置了一个点击时间处理程序，事件处理程序里面设置了一个250ms后调用的定时器。
  (1).首先将onclick事件处理程序加入队列；
  (2).onclick事件处理程序执行后才设置了定时器；
  (3).再过了250ms后，指定的代码才被添加到队列中等待执行。

var oBtn = document.getElementById('myBtn');
oBtn.onclick = function () {
   setTimeout(function () {
       document.getElementById('message').style.visibility = 'visible';
   },250);
   //其他代码......
}

二.setInterval()

• 1.setInterval(),方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

• 2.当使用setInterval()时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中，这确保了定时器代码加入到队列中的最小时间间隔为指定间隔。

• 3.这种重复定时器的规则有两个问题：
  (1)某些时间间隔会被跳过；
  (2)多个定时器的代码执行之间的间隔可能会比预期的小

• 4.例如，假设某个onclick事件处理程序使用setInterval()设置了一个200ms间隔的重复定时器。但是如果oncilck事件处理程序花了300ms多一点的时间完成，同时定时器的代码也花了差不多的时间，就会同时出现跳过间隔且连续运行定时器代码的情况。
  

• 5.注：上面这个栗子中的第一个定时器是在205ms处添加到队列中的，但是一直到了300ms才能够执行(onclick处理程序结束后)。当执行第一个定时器代码过程中，在405ms处又给队列添加了另外一个副本。在下一个间隔，即605ms处，第一个定时器代码仍然在运行，但是同时在队列中已经有了一个定时器代码的实例。结果是，在这个时间点上的定时器代码不会被添加到队列中。结果在5ms处添加的定时器代码结束之后，405ms处添加的定时器代码就立刻执行。

• 6.为避免以上的两个缺点，可以选择使用以下模式

//这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔，而且可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。

setTimeout(function () {
   //处理中...
   setTimeout(arguments.callee,interval);
},interval)