Reprinted from: https://www.cnblogs.com/hajerbin/p/7098055.html
solved problem:
1, the code has changed dom, dom want this operation in the following code (do not know when dom is ready to render). Contrast this usage Vue's nextTick ().
Trigger 2, onkeypress and other events is a sequential, I want to perform after these events triggered executed. Such as content input after the change in the onkeypress event, it can not get to change the input event onkeypress, this time using setTimeout (func, 0)
Related Terms:
Macro tasks, micro-tasks
Demo code:
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, unused <code> setTimeout </ code> ( not checked the text box contents) </ H2> 51 is <Button ID = "makeinput"> generating INPUT </ Button> 52 is <P ID = "inpwrapper"> </ P> 53 is <H2> 2, using <code> setTimeout </ code> ( immediately check the text box contents) </ H2> 54 is <Button ID = "makeinput2"> generating INPUT </ Button> </ H2> 55 <P ID = "inpwrapper2"> </ P> 56 is 57 is ------------------------------------ -------------------------------------- 58 <h1 of> <code> DEMO2 </ code> </ h1 of> 59 <H2>. 1, not used <code> setTimeout </ code> ( only when the input of the second character, the previous character was displayed) </ H2> 60 < INPUT type = "text" ID = "INPUT1" value = "" /> <div ID = "preview1"> </ div> 61 is <H2> 2, using <code> setTimeout </ code> ( input characters while displayed) </ H2> 62 is 63 <input type="text" id="input2" value=""/><div id="preview2"></div> 64 65 </body> 66 </html>