1.背景介绍

setTimeout()

指定延迟时间之后来执行代码

只执行一次，不会循环。

setInterval()

每隔指定的时间执行代码

重复执行，无限循环

2.知识剖析

setTimeout

语法：window.setTimeout(code, millisecs);

code:必需。要调用的函数或执行的JavaScript代码。

millisecs:必需。在执行代码前需等待的毫秒数。

调用函数格式(假设有一个clock()函数):

setTimeout("clock()",1000)

或

setTimeout(clock,1000)

setInterval

语法：window.setInterval(code,millisecs);

code：必需。要调用的函数或要执行的代码串。

millisecs：必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

调用函数格式同上。

清除定时器

与生成定时器的方法相对应的有两种清除定时器的方法：

clearTimeout(timer)   &   clearInterval(timer)

每次调用定时器，都会返回一个整型的值，该值便是用来取消定时器循环的。

为了更方便的清除指定定时器，可以在使用定时器的时候，定义一个变量来记录定时器的返回值。比如：

var timer = setTimeOut(test,1000);

清除的时候便可以直接使用以上方法。

3.常见问题

setInterval多次调用后执行频率为什么越来越快？

setInterval() 的运行模式是按照指定的周期（以毫秒计）来调用函数或计算表达式。

这就使得在某个多次执行或者重复执行事件中创建的setInterval()都会独立的保留下来。

当我们给定时器定义一个返回值（变量 timer ）之后，每次重复调用该定时器，便会重新赋予 timer 一次的值，所以在多次调用定时器之后，使用 timer 清除的时候只能清除掉最近一次调用的定时器。

4.解决方案

方案一：

清除定时器

即在每次调用定时器之前先将之前调用的定时器清除掉，然后再重新进行调用。

方案二：

给调用定时器的事件加一个限制

即当一个事件调用定时器之后，将定时器的调用无效化。（可以看成给定时器加了一个开关）

5.代码实战

6.拓展思考

Javascript是单线程执行的，也就是无法同时执行多段代码，当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列，一旦当前任务执行完毕，再从队列中取下一个任务。这也常被称为“阻塞式执行”。

如果代码中设定了一个setTimeout,那么浏览器便会在合适的时间，将代码插入到任务队列中，如果这个时间设为0，就代表立即插入到队列，但不是立即执行，仍要等待前面代码执行完毕。所以setTimeout并不能保证执行的时间，是否及时执行取决于javascript 线程拥挤还是空闲。

7.参考文献

参考一：脚本之家

参考二：博客园

参考三：W3Cschool

8.更多讨论

如何动态的改变时间间隔（seconds）？

使用定时器都可以实现什么功能？