码迷,mamicode.com
首页 > 其他好文 > 详细

setTimeout(call,0)作用

时间:2018-02-04 18:13:15      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:demo   情况   使用   value   情况下   语句   执行顺序   key   select   

setTimeout(call,0)作用
 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后面评论上不吝指出。

1、实现javascript的异步;
正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身,这时就可以用到setTimeout延时0ms来实现了。
如: 
alert(1); 
setTimeout("alert(2)", 0); 
alert(3); 
虽然延时了0ms,但是执行顺序为:1,3,2 
这样就保证setTimeout里面的语句在某一代码段中最后执行。 


2、在事件中,setTimeout 会在其完成当前任何延宕事件的事件处理器的执行,以及完成文档当前状态更新后,告诉浏览器去启用 setTimeout 内注册的函数。
 举个例子来说这句话的意思,假如当某个事件在页面上建立一个文本框,并给文本框赋值(完成文档当前状态更新),然后将焦点定到文本框,并且选中文本框的内容(后面部分就需要用到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技术分享图片 (function(){
 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技术分享图片    get(‘inpwrapper‘).appendChild(input);
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可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。

setTimeout(call,0)作用

标签:demo   情况   使用   value   情况下   语句   执行顺序   key   select   

原文地址:https://www.cnblogs.com/wwlww/p/8413512.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!