setTimeout的实现原理以及setTimeout(0)的使用场景

 

先看一段代码：

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是单线程执行的，没法同时执行多段代码。当某一段代码正在执行的时候，全部后续的任务都必须等待，造成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。因此一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会当即运行，而是当即排队，一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码，此时发生了一次鼠标点击，那么事件处理程序就被阻塞，用户也没法当即看到反馈，事件处理程序会被放入任务队列，直到前面的代码结束之后才会开始执行。若是代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，若是这个时间设为 0，就表明当即插入队列，但不是当即执行，仍然要等待前面代码执行完毕。因此 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)的做用。

 原文连接：http://blog.csdn.net/aitangyong/article/details/46800615

 

尽管setTimeout的delay是0，也会做为一次异步调用，而每次异步调用结束后都会render页面