setTimeout(call,0)作用
阿新 • • 發佈：2018-02-04
可能 不可 on() 評論 element child htm 期望 能夠 setTimeout(call,0)作用
經常看到setTimeout延時0ms的javascript代碼，感到很迷惑，難道延時0ms和不延時不是一個道理嗎？後來通過查資料以及實驗得出以下兩個作用，可能還有作用我還不知道，希望得知的朋友在後面評論上不吝指出。
舉個例子來說這句話的意思，假如當某個事件在頁面上建立一個文本框，並給文本框賦值（完成文檔當前狀態更新），然後將焦點定到文本框，並且選中文本框的內容（後面部分就需要用到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
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
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可以把任務從某個隊列中跳脫成為新隊列，因而能夠得到期望的結果。
1、實現javascript的異步；
正常情況下javascript都是按照順序執行的。但是我們可能讓該語句後面的語句執行完再執行本身，這時就可以用到setTimeout延時0ms來實現了。
如：
alert(1);
setTimeout("alert(2)", 0);
alert(3);
雖然延時了0ms,但是執行順序為：1，3，2
這樣就保證setTimeout裏面的語句在某一代碼段中最後執行。
2、在事件中，setTimeout 會在其完成當前任何延宕事件的事件處理器的執行，以及完成文檔當前狀態更新後，告訴瀏覽器去啟用 setTimeout 內註冊的函數。
舉個例子來說這句話的意思，假如當某個事件在頁面上建立一個文本框，並給文本框賦值（完成文檔當前狀態更新），然後將焦點定到文本框，並且選中文本框的內容（後面部分就需要用到setTimeout 延遲0ms實現，否則不好實現）。
先看個例子： 1
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
運行示例
現有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中，不會同步去執行，必須在完成一個任務後才開始另外一個任務。其實，這是一個把需要執行的任務從隊列中跳脫的技巧。在DEMO1中，JavaScript 引擎在執行 onmousedown時，由於沒有多線程的同步執行，不可能同時去處理剛創建元素的 focus 和 select 方法，由於這兩個方法都不在隊列中，在完成 onmousedown 後，JavaScript 引擎已經丟棄了這兩個任務，正如第一種情況。而在第二種情況中，由於setTimeout可以把任務從某個隊列中跳脫成為新隊列，因而能夠得到期望的結果。
setTimeout(call,0)作用