转载自：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>
