setTimeout（0）

2012-10-10 16:43 依水间阅读(8977) 评论(1) 编辑收藏举报

由 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实现，否则不好实现）。
先看个例子：

<!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

(function(){
7

function get(id){
9

return document.getElementById(id);
10

}
11

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

--------------------------------------------------------------------------
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

运行示例
现有的 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

会员力量，点亮园子希望

刷新页面返回顶部

依水间

setTimeout（0）

setTimeout为0的应用

About