js中 setTimeout延时0毫秒的作用

2019/11/07 04:09
阅读数 7

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

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部