代码改变世界

setTimeout(0)

2012-10-10 16:43 by 依水间, ... 阅读, ... 评论, 收藏, 编辑

由 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

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

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 <id="inpwrapper"></p>
48 <h2>2、使用 <code>setTimeout</code>(立即选中文本框内容)</h2>
49 <button id="makeinput2">生成 input</button></h2>
50 <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