浅析js中setTimeout和setInterval详解

大概半年前发表过一篇关于setTimeout和setInterval的文章，但是现在回去仔细一看发现其实存在很多不足以及错误。事实上，setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法，还得从javascript的单线程机制说起。

JS手册»setTimeout() : 用于在指定的毫秒数后调用函数或计算表达式;
英文释义»timeout() : 超时；暂时休息；工间休息;
JS手册»setInterval() : 按照指定的周期(以毫秒计)来调用函数或计算表达式. 会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭;
英文释义»interval() : 间隔；间距；幕间休息;
不难看出, 只要我们仔细体会JS手册及命名释义, 就能很容易的区分开两者的区别. 简单的说, 两才的区别在于, setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval().

setTimeout和setInterval是如何工作的呢？

我们知道，js是单线程执行的。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。

而如何计算插入的时间点呢？自然是要用到我们所说的timer，也就是计时器。当执行setTimeout和setInterval的时候，timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时，就触发timer callback，也就是我们设定的回调函数：

setTimeout：

setTimeout()方法用于在指定的毫秒数后调用函数或表达式。

语法：setTimeout(code, millisec)

code是要调用的js，millisec是在执行code前要等待的时间。

setInterval：

setInterval()方法用于在指定的周期（毫秒）间隔后执行函数或表达式。

语法：setInterval(code, millisec)

code是要调用的js，millisec是每隔这些时间后去执行code。setInterval是每隔millisec后执行一次code，是不停地执行。

注：setTimeout 和 setInterval 最大的区别就是执行一次和执行N次。

如果想停用setInterval可以调用clearInterval()方法，相对应的也有clearTimeout()这个方法，用于随时停止setTimeout，不过一般都用不到。

代码如下: 
 

上面这个例子就是我们通常的用法，应该容易理解。可是，timer真的能那么准确么？代码队列的执行真的能那么正常么？

【斩草除根】重新认识所谓的“异步”

刚刚已经知道，事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行（或者说异步执行）。但是事实上所谓的异步只是一个假象??它同样运行在一个线程上！
那么问题就来了，要是在代码插入点前的代码执行时间超过了传入setTimeout或setInterval的设定时间会怎样呢？让我们来看看这段代码：

代码如下: 
 

你觉得这段代码的执行结果是什么呢？答案是，alert永远不会出现。
这是为什么呢？因为，while这段代码没有执行完，插入在后面的代码便永远不会执行。
综上所述，其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”（包括Ajax）事实上也只是“伪异步”而已。只要理解了这么一个概念，也许理解setTimeout和setInterval也就不难了