首页 > 代码库 > setTimeout延时0毫秒的作用
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可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。
setTimeout延时0毫秒的作用