setTimeout(call,0)作用
Posted wwlww
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了setTimeout(call,0)作用相关的知识，希望对你有一定的参考价值。
setTimeout(call,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实现，否则不好实现）。
先看个例子：
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
<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可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。
以上是关于setTimeout(call,0)作用的主要内容，如果未能解决你的问题，请参考以下文章
js中setTimeout和setInterval的应用方法（转）