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

先看一段代码：

var start = new Date();

setTimeout(function(){

    var end = new Date();

    console.log("Time elapsed: ", end - start, "ms");

}, 500);

while (new Date - start <= 1000)

{

}

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

再看一段代码：

function a()

{

	setTimeout(function(){console.log(1);},0);

	console.log(2);

}

a();

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

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

以下这段解释来自这篇博客：

       
JavaScript是单线程运行的，无法同一时候运行多段代码。当某一段代码正在运行的时候，全部兴许的任务都必须等待，形成一个队列。

所以 setTimeout 并不能保证运行的时间。是否及时运行取决于 JavaScript 线程是拥挤还是空暇。

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

var start = new Date();

setTimeout(function(){

    var end = new Date();

    console.log("Time elapsed: ", end - start, "ms");

}, 500);

console.log("task finished.");

我们之所以会感觉到这段代码是在异步运行，这是由于javascript线程并没有由于什么耗时操作而堵塞，所以能够非常快地取出排队队列中的任务然后运行它。

如今我们知道了setTimeout的原理了，如今看下setTimeout(0)的使用场景。以下这个样例来自这篇文章。

<input type="text" onkeydown="show(this.value)">

<div></div>

<script type="text/javascript">

  function show(val) {

    document.getElementsByTagName('div')[0].innerHTML = val;

  }

</script>

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

<input type="text" onkeydown="var self=this; setTimeout(function() {show(self.value)}, 0)">

<div></div>

<script type="text/javascript">

  function show(val) {

    document.getElementsByTagName('div')[0].innerHTML = val;

  }

</script>

这段代码使用了setTimeout(0)就能够实现需要的效果了。

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

參考文章：setTimeout(0) 的作用