js中 setTimeout延时0毫秒的作用
2021-07-08 06:06
标签：element inner 显示 执行 his 代码段 turn 并且 函数 经常看到setTimeout延时0ms的javascript代码，感到很迷惑，难道延时0ms和不延时不是一个道理吗？后来通过查资料以及实验得出以下两个作用，可能还有作用我还不知道，希望得知的朋友在后面评论上不吝指出。 看个例子： 现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。 在DEMO1中，JavaScript 引擎在执行 onmousedown时，会先执行alert(123),然后执行select和focus调用，由于此时还没有创建好DOM元素，不会得到期望的结果，然后执行创建操作。相反 如果我们改变调用的执行顺序即可，“先执行“ 元素的创建，使用settimeout延迟0毫秒再执行select和focus调用。核心在于，把select和focus调用加入到任务队列，待调用栈清空后再“立即执行任务“ js中 setTimeout延时0毫秒的作用 标签：element inner 显示 执行 his 代码段 turn 并且 函数 原文地址：http://www.cnblogs.com/hajerbin/p/7098055.html
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>
meta charset="utf-8">
title>setTimeouttitle>
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>DEMO1code>h1>
h2>1、未使用 code>setTimeoutcode>（未选中文本框内容）h2>
button id="makeinput">生成 inputbutton>
p id="inpwrapper">p>
h2>2、使用 code>setTimeoutcode>（立即选中文本框内容）h2>
button id="makeinput2">生成 inputbutton>h2>
p id="inpwrapper2">p>
--------------------------------------------------------------------------
h1>code>DEMO2code>h1>
h2>1、未使用 code>setTimeoutcode>(只有输入第二个字符时，前一个字符才显示出来)h2>
input type="text" id="input1" value=""/>div id="preview1">div>
h2>2、使用 code>setTimeoutcode>(输入时，字符同时显示出来)h2>
input type="text" id="input2" value=""/>div id="preview2">div>
body>
html>