你真的懂JavaScript计时器吗?

在今天之前我一直以为setTimeout这个函数是异步的，无意中看到了一篇关于setTimeout的文章，发现自己以前的认识全是错误的，赶紧总结下。

先看一段代码：

运行这段脚本可以看到：Time elapsed的值大概在1001ms左右，肯定会超过1000ms。也就是说：setTimeout失效了，指定的函数并没有在500ms后执行，而是延迟到1000ms后才执行。

再看一段代码：

运行这段脚本可以看到：先打印2后打印1，我们在setTimeout里面指定了0ms，希望能立即执行，但是实际上没有效果。

想要理解上面的2段代码，我们得了解一下javascript中setTimeout的实现原理。首先牢记一点：JavaScript 是单线程执行的，也就是无法同时执行多段代码。下面这段解释来自这篇博客：

        JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码，此时发生了一次鼠标点击，那么事件处理程序就被阻塞，用户也无法立即看到反馈，事件处理程序会被放入任务队列，直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

也就是说setTimeout只能保证在指定的时间过后将任务(需要执行的函数)插入队列等候，并不保证这个任务在什么时候执行。执行javascript的线程会在空闲的时候，自行从队列中取出任务然后执行它。javascript通过这种队列机制，给我们制造一个异步执行的假象。

我们之所以会感觉到这段代码是在异步执行，这是因为javascript线程并没有因为什么耗时操作而阻塞，所以可以很快地取出排队队列中的任务然后执行它。

现在我们知道了setTimeout的原理了，现在看下setTimeout(0)的使用场景。下面这个例子来自这篇文章。

这里绑定了 keydown 事件，意图是当用户在文本框里输入字符时，将输入的内容实时地在 <div> 中显示出来。但是实际效果并非如此，可以发现，每按下一个字符时，<div> 中只能显示出之前的内容，无法得到当前的字符。

这段代码使用了setTimeout(0)就可以实现需要的效果了。这里其实涉及2个任务，1个是将键盘输入的字符回写到输入框中，一个是获取文本框的值将其写入div中。第一个是浏览器自身的默认行为，一个是我们自己编写的代码。很显然，必须要先让浏览器将字符回写到文本框，然后我们才能获取其内容写到div中。改变顺序，这这正是setTimeout(0)的作用。