setTimeout延时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实现,否则不好实现)。
先看个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>setTimeout</title>
<script type="text/javascript" >
(function(){

 function get(id){
  return document.getElementById(id);
 }

 window.onload = function(){
  get(‘makeinput‘).onmousedown = function(){
   var input = document.createElement(‘input‘);
   input.setAttribute(‘type‘, ‘text‘);
   input.setAttribute(‘value‘, ‘test1‘);
   get(‘inpwrapper‘).appendChild(input);
   input.focus();
   input.select();
  }
  get(‘makeinput2‘).onmousedown = function(){
   var input = document.createElement(‘input‘);
   input.setAttribute(‘type‘, ‘text‘);
   input.setAttribute(‘value‘, ‘test1‘);
   get(‘inpwrapper2‘).appendChild(input);
   setTimeout(function(){
    input.focus();
    input.select();
   }, 0);
  }
  get(‘input1‘).onkeypress = function(){
   get(‘preview1‘).innerHTML = this.value;
  }
  get(‘input2‘).onkeypress = function(){
                               setTimeout(function(){
   get(‘preview2‘).innerHTML = get(‘input2‘).value;
                              },0 );
  }
 }
})();
</script>
</head>
<body>
<h1><code>DEMO1</code></h1>
<h2>1、未使用 <code>setTimeout</code>(未选中文本框内容)</h2>
<button id="makeinput">生成 input</button>
<p id="inpwrapper"></p>
<h2>2、使用 <code>setTimeout</code>(立即选中文本框内容)</h2>
<button id="makeinput2">生成 input</button></h2>
<p id="inpwrapper2"></p>

<h1><code>DEMO2</code></h1>
<h2>1、未使用 <code>setTimeout</code>(只有输入第二个字符时,前一个字符才显示出来)</h2>
<input type="text" id="input1" value=""/><div id="preview1"></div>
<h2>2、使用 <code>setTimeout</code>(输入时,字符同时显示出来)</h2>
<input type="text" id="input2" value=""/><div id="preview2"></div>
</body>
</html>

现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。其实,这是一个把需要执行的任务从队列中跳脱的技巧。在DEMO1中,JavaScript 引擎在执行 onmousedown时,由于没有多线程的同步执行,不可能同时去处理刚创建元素的 focus 和 select 方法,由于这两个方法都不在队列中,在完成 onmousedown 后,JavaScript 引擎已经丢弃了这两个任务,正如第一种情况。而在第二种情况中,由于setTimeout可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。

时间: 2024-10-12 02:37:57

setTimeout延时0毫秒的作用的相关文章

js中 setTimeout延时0毫秒的作用

经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后面评论上不吝指出.1.实现javascript的异步:正常情况下javascript都是按照顺序执行的.但是我们可能让该语句后面的语句执行完再执行本身,这时就可以用到setTimeout延时0ms来实现了.如: alert(1); setTimeout("alert(2)", 0); ale

setTimeout的作用以及setTimeout延时0毫秒的作用

以下代码输出的顺序是? console.log(1); setTimeout(function(){ console.log(2); }, 0); setTimeout(function(){ console.log(3); }, 1000);console.log(4); 答案是: 1 4 2 3 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后

setTimeout延时0毫秒的作用和问题

一 作用 http://www.cnblogs.com/xieex/archive/2008/07/11/1241151.html 经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗? 延时0秒能将函数执行脱离出当前环境: 当一个事件发生时,其相关的操作还没完成. 所以: 1 keypress事件中并不能获得 此处输入的字符,只能获得之前的 2 radio 的 click事件中,并不能获得此处点击是否选中该radio,而是获得点击之

setTimeout(call,0)作用

经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后面评论上不吝指出. 1.实现javascript的异步:正常情况下javascript都是按照顺序执行的.但是我们可能让该语句后面的语句执行完再执行本身,这时就可以用到setTimeout延时0ms来实现了.如: alert(1); setTimeout("alert(2)", 0); al

JavaScript下的setTimeout(fn,0)的作用,涨知识了

在工作学习中,我看到团队中的有些大神的代码中不时的出现setTimeout(fn,0):这样的写法,很好奇,这样写的作用是什么,在网上,经过一位网友无私耐心地阐述,我才对js单线程的机制有了更深的认识,此处我引上链接,与君共勉! http://www.cnblogs.com/silin6/p/4333999.html

Javascript定时器(三)——setTimeout(func, 0)

setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type="text/javascript"> function delay1() { console.log('delay1'); } function delay2() { console.log('delay2'); } function delay3() { console.log('dela

get(0).tagName获得作用标签

<script type="text/javascript" src="jquery1.4.js"></script><script type="text/javascript">$(function(){    $(".test li,.test dd").click(function(){        alert('本身为大写:' + $(this).get(0).tagName +

sql where 1=1和 0=1 的作用

sql where 1=1和 0=1 的作用 摘自: http://www.cnblogs.com/junyuz/archive/2011/03/10/1979646.html where 1=1; 这个条件始终为True,在不定数量查询条件情况下,1=1可以很方便的规范语句. 一.不用where  1=1  在多条件查询中的困扰 举个例子,如果您做查询页面,并且,可查询的选项有多个,同时,还让用户自行选择并输入查询关键词,那么,按平时的查询语句的动态构造,代码大体如下: string MySq

setTimeout(fn, 0)引发的JavaScipt线程的思考

起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) checkbox的parent(container). 前者先将display属性更新为block(正确), 后者再次更新为none(错误). 普通的思路是, 修改checkbox的container的代码, 使其能正确更新display值. 但另有一种更巧妙的方法, 就是修改checkbox的con