setTimeout延时0毫秒的做用

时间 2019-11-22

标签 settimeout 延时毫秒繁體版

原文原文链接

wizardpisces经验：javascript

这几天作web动画，用到css3的animation，为了对一个存在的元素触发动画，能够经过添加className，但是只能触发一次，为了触发屡次我尝试了先删除className后直接添加的方法，失败了，最后我经过删除和建立元素得以实现再添加className得以实现，看完这篇文章，经过先删除元素className再setTimeout(添加元素的className,时间)，得以实现屡次触发效果，不过最后的原理仍是有点模糊，若是各位有新颖的看法，但愿不吝赐教。2014/7/25号BOSS说setTimeout会被线程放在堆栈底，与这篇文章解释有所差别。setTimeout好像有种强制重绘的能力css

原文：html

常常看到setTimeout延时0ms的javascript代码，感到很迷惑，难道延时0ms和不延时不是一个道理吗？后来经过查资料以及实验得出如下两个做用，可能还有做用我还不知道，但愿得知的朋友在后面评论上不吝指出。
一、实现javascript的异步；
正常状况下javascript都是按照顺序执行的。可是咱们可能让该语句后面的语句执行完再执行自己，这时就能够用到setTimeout延时0ms来实现了。
如：
alert(1);
setTimeout("alert(2)", 0);
alert(3);
虽然延时了0ms,可是执行顺序为：1，3，2
这样就保证setTimeout里面的语句在某一代码段中最后执行。

二、在事件中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。；
举个例子来讲这句话的意思，假如当某个事件在页面上创建一个文本框，并给文本框赋值（完成文档当前状态更新），而后将焦点定到文本框，而且选中文本框的内容（后面部分就须要用到setTimeout 延迟0ms实现，不然很差实现）。
先看个例子：
java

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 <html>

 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <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>一、未使用 <code>setTimeout</code>（未选中文本框内容）</h2>
<button id="makeinput">生成 input</button>
<p id="inpwrapper"></p>
<h2>二、使用 <code>setTimeout</code>（当即选中文本框内容）</h2>
<button id="makeinput2">生成 input</button></h2>
<p id="inpwrapper2"></p>

--------------------------------------------------------------------------
<h1><code>DEMO2</code></h1>
<h2>一、未使用 <code>setTimeout</code>(只有输入第二个字符时，前一个字符才显示出来)</h2>
<input type="text" id="input1" value=""/><div id="preview1"></div>
<h2>二、使用 <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能够把任务从某个队列中跳脱成为新队列，于是可以获得指望的结果。css3