js中 setTimeout延时0毫秒的作用

转载自：https://www.cnblogs.com/hajerbin/p/7098055.html

解决的问题：

1、代码中改变了dom,又想在后续的代码中操作此dom（自己不知道dom什么时候渲染就绪）。此用法对比Vue的nextTick()。

2、onkeypress等事件的触发是有先后顺序的，想在这些触发的事件执行完之后执行。比如input的内容改变是在的onkeypress事件之后，即onkeypress中无法获取input事件的改变，这时候可以使用setTimeout(func,0)

演示代码：

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

解决的问题：

相关术语：

演示代码：