setTimeout（0）

由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。

让我们看看我之前的文章：JavaScript的9个陷阱及评点，在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差，其实不只是 IE 的问题，而是现有 JavaScript 引擎对于线程实现的问题（关于线程，我的概念其实不多，如果不对，希望读者多多指教）。我们通过一个例子来说明，请访问http://realazy.org/lab/settimeout.html. 我们来看 1 和 2。如果你能看看源代码，会发现我们的任务很简单，就是给文档增加一个 input 文本框，并聚焦和选中。请现在分别点击一下，可以看到，1 并没有能够聚焦和选中，而 2 可以。它们之间的区别在于，在执行：

input.focus();
input.select();

时， 2 多了一个延迟时间为 0 的 setTimeout 的外围函数，即：

setTimeout(function(){
 input.focus();
 input.select();
}, 0);

按照 JavaScript: The Definitive Guide 5th 的 14.1 所说：

在实践中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。

其实，这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子，JavaScript 引擎在执行 onkeypress 时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 事件，由于这两个事件都不在队列中，在完成 onkeypress 后，JavaScript 引擎已经丢弃了这两个事件，正如你看到的例子 1 的情况。而在例子 2 中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。在此，你可以看看例子 3，它的任务是实时更新输入的文本，现在请试试，你会发现预览区域总是落后一拍，比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时， a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地，在此我没有给出答案，因为上面所说的，就是解决思路，try it yourself!

-----------------------------------------------------------------------------------------------------------------------------------

相信所有做前端开发的同学都会经常使用 setTimeout(0) 来做很多事情，这个一度成为解决了很多前端疑难杂症的法宝。而且大家也知道 setTImeout(0) 的极限在16ms左右。也许很多人没想到这个是一个很严重的问题，但是在w3c性能小组的专家眼里这是一个非常纠结的设置。

那setTimeout和16ms会带来什么问题呢？

1. 我们都知道，我们在做页面动画的时候大多数都是在用setTImeout来控制每一帧的动画的， 而多个setTimeout的存在会导致很多次CPU中断调度的开销，为了减少这些开销，我们希望同一个统一的CPU中断调度管理调度单元来管理所有动画，

于是就出现了 requestAnimationFrame。 requestAnimationFrame 的出现不仅仅可以解决中断调度的问题，还可以更加优化得统一管理动画单元里dom元素的repaint方式。

2. 杯具的16ms，在早期。js的callback执行，是依赖CPU的中断来进行控制的，如果两个中断之间时间太短会导致，CPU性能消耗很高，同时影响能耗，于是微软和英特公司为了解决这个问题，就约定每个中断之间的间隔是15.6ms（64 fps）所以就是我们常见的约等于16ms的间隔。不过随着web的要求不断增加，大家对这个要求希望是放宽的态度，于是在高端浏览器，这个性能被提升了4倍左右，所以在chrome，ie10等浏览器，setTimeout的间隔缩短到了 4ms （250 fps）。 但是问题来了，这么高的消耗以传统的方式，并不能从根本上解决CPU的调度问题，而且能耗也会提升40%

于是W3C，提出需要取代 setTimeout(0) 的代替品 --- setImmediate

不过到底底层如何解决了这个CPU调度，还能保证脚本能够很快执行，这块舜子还在研究，了解的朋友也欢迎一起交流哈。

 

这是两个非常好的方法用来取代setTimeout的api，舜子也做了一些小小的实验来验证 requestAnimationFrame,setImmediate 和 setTimeout 之间的执行效率区别，在IE10下可以看到，setImmediate 接口的callback次数可以达到每秒 6000 次的的执行。而requestAnimationFrame主要目的是为了保证动画的圆滑播放，所以基本上是控制在60 fps的范围，而且根据文档介绍，只是一个时钟控制器在进行调度，而且会更加需要来进行按需渲染。

http://www.pjhome.net/web/html5/timing_test.htm

转自：http://www.pjhome.net/article/Javascript/setImmediate_requestAnimationFrame.html

--------------------------------------------------------------------------------------------------------------------------------------

setTimeout为0的应用

body { background:url(images/page-bg.gif); font-size:14px;}

setTimeout为0的应用

在下面两个输入框里输入字符，看看有什么不同？

A：没有使用setTimeout

你输入了：

B：setTimeout为0

你输入了：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml" >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > setTimeout为0的应用 </ title >  
< style  type ="text/css" >  
body  {  background : url(images/page-bg.gif) ;  font-size : 14px ; }  
</ style >  
</ head >  

< body >  
< h1 > setTimeout为0的应用 </ h1 >  
< p > 在下面两个输入框里输入字符，看看有什么不同？ </ p >  
< p >  
A： < input  type ="text"  id ="t1"  name ="t1"  
onkeydown ="document.getElementById('t1text').innerHTML='你输入了：'+this.value;"  value =""   /> 没有使用setTimeout 

</ P >  
< div  id ="t1text" > 你输入了： </ div >  
< p >  
B： < input  type ="text"  id ="t2"  name ="t2"  
onkeydown ="var t2=this;setTimeout(function(){document.getElementById('t2text').innerHTML='你输入了：'+t2.value},0);"  
value =""   /> setTimeout为0 </ p >  
< div  id ="t2text" > 你输入了： </ div >  
</ body >  
</ html >

小结： 

类似起线程。前者没用settimeout ，所以是主线程去做的响应，所以在onkeydown 就触发事件执行。得到的数据会有差异。

-------------------------------------------------------------------------------------------------------------------------------------------

经常看到setTimeout延时0ms的javascript代码，感到很迷惑，难道延时0ms和不延时不是一个道理吗？后来通过查资料以及实验得出以下两个作用，可能还有作用我还不知道，希望得知的朋友在后面评论上不吝指出。
1、实现javascript的异步；
正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身，这时就可以用到setTimeout延时0ms来实现了。
如： 
alert(1); 
setTimeout("alert(2)", 0); 
alert(3); 
虽然延时了0ms,但是执行顺序为：1，3，2 
这样就保证setTimeout里面的语句在某一代码段中最后执行。 


2、在事件中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。；
 举个例子来说这句话的意思，假如当某个事件在页面上建立一个文本框，并给文本框赋值（完成文档当前状态更新），然后将焦点定到文本框，并且选中文本框的内容（后面部分就需要用到setTimeout 延迟0ms实现，否则不好实现）。
先看个例子：

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
 2 < html >
 3 < head >
 4 < title > setTimeout </ title >
 5 < script  type ="text/javascript"   >
 6 (function(){
 7  
 8  function get(id){
 9   return document.getElementById(id);
10  }
11  
12  window.onload = function(){
13   get('makeinput').onmousedown = function(){
14    var input = document.createElement('input');
15    input.setAttribute('type', 'text');
16    input.setAttribute('value', 'test1');
17    get('inpwrapper').appendChild(input);
18    input.focus();
19    input.select();
20   }
21   get('makeinput2').onmousedown = function(){
22    var input = document.createElement('input');
23    input.setAttribute('type', 'text');
24    input.setAttribute('value', 'test1');
25    get('inpwrapper2').appendChild(input);
26    setTimeout(function(){
27     input.focus();
28     input.select();
29    }, 0);
30   }
31   get('input1').onkeypress = function(){
32    get('preview1').innerHTML = this.value;
33   }
34   get('input2').onkeypress = function(){
35                                setTimeout(function(){
36    get('preview2').innerHTML = get('input2').value;
37                               },0 );
38   }
39  }
40 })();
41 </ script >
42 </ head >
43 < body >
44   < h1 >< code > DEMO1 </ code ></ h1 >
45   < h2 > 1、未使用  < code > setTimeout </ code > （未选中文本框内容） </ h2 >
46   < button  id ="makeinput" > 生成 input </ button >
47   < p  id ="inpwrapper" ></ p >
48   < h2 > 2、使用  < code > setTimeout </ code > （立即选中文本框内容） </ h2 >
49   < button  id ="makeinput2" > 生成 input </ button ></ h2 >
50   < p  id ="inpwrapper2" ></ p >
51
52 --------------------------------------------------------------------------
53   < h1 >< code > DEMO2 </ code ></ h1 >
54   < h2 > 1、未使用  < code > setTimeout </ code > (只有输入第二个字符时，前一个字符才显示出来) </ h2 >
55   < input  type ="text"  id ="input1"  value ="" />< div  id ="preview1" ></ div >
56   < h2 > 2、使用  < code > setTimeout </ code > (输入时，字符同时显示出来) </ h2 >
57 < input  type ="text"  id ="input2"  value ="" />< div  id ="preview2" ></ div >
58 </ body >
59 </ html >
60
61

 

运行示例
现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。其实，这是一个把需要执行的任务从队列中跳脱的技巧。在DEMO1中，JavaScript 引擎在执行 onmousedown时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 方法，由于这两个方法都不在队列中，在完成 onmousedown 后，JavaScript 引擎已经丢弃了这两个任务，正如第一种情况。而在第二种情况中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。

转自：http://www.cnblogs.com/xieex/archive/2008/07/11/1241137.html

另：

http://stackoverflow.com/questions/4574940/settimeout-with-zero-delay-used-often-in-web-pages-why

http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful