setTimeout延时0毫秒的作用

浅浅的花香味﹌ 2022-06-13 06:09 188阅读 0赞

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

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

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

[copycode.gif]: /images/20220613/4803be6950c049bf86774135c69b4077.png
[None.gif]: /images/20220613/183c1d3993e745e188877ae85d346139.png
[ExpandedBlockStart.gif]: /images/20220613/3ac68dc37b854f1592d343036199b067.png
[ExpandedSubBlockStart.gif]: /images/20220613/c6a762dd5ae5407e95d3328a0c44b620.png
[InBlock.gif]: /images/20220613/d6ab4228d3d6487f9f82b5b29ccf9736.png
[ExpandedSubBlockEnd.gif]: /images/20220613/8c9418c4c27040a78a646d8010dc35a4.png
[ExpandedBlockEnd.gif]: /images/20220613/aaf0fcce20584db189c7923686a27859.png
[Link 1]: http://www.cnblogs.com/xieex/archive/2008/07/11/1241151.html