JavaScript定时器

在JavaScript里实现定时器效果可以用setTimeout()和setInterval()两个函数。在WEB开发总是采取setTimeout()函数延迟一段时间执行函数或者加载数据为了达到更好的用户体验。setInterval()函数主要用于每隔一段时间执行一次函数调用。

setTimeout()函数

JavaScript函数是单线程执行的，假如说到了setTimeout函数设置的时间了，它就把代码插入执行队列，如果这个队列没有执行的代码，那就立即执行定时器代码，如果有正在执行的代码那么就要等到代码执行完毕后才执行定时器代码。这就意味并不是在定时器时间到了就立即执行代码而是把代码添加到执行队列。

setInterval()函数

假如设置的时间间隔为100ms，但是执行定时器代码需要300毫秒，这样在程序执行到100毫秒的时候，定时器到时了，这时在执行队列中添加另外一个定时器代码副本。当第一个定时器代码运行到200毫秒时，定时器又到时，但是第一个定时器代码正在执行而且执行队列已经有一个定时器副本了，所以这次的定时器代码不会被添加到执行队列中。这样当第一个定时器代码执行结束后，第二个定时器代码就会立即执行，没有达到间隔的效果。可以用以下代码来避免这种结果（来自javascript高级编程第二版）

setTimeout(function()

{

   //处理代码

   setTimeout(arguments.callee,interval);

},interval);

这个模式下，每次执行定时器都会创建一个新的定时器。第二个setTimeout通过调用arguments.callee来获取当前函数的引用，并设置另一个定时器。这就确保了第一个定时器代码执行完毕前不会向队列插入新的定时器代码，也不会有缺失时间间隔。