设置setTimeout延时为0ms的作用
2021-06-22 本文已影响0人
程序猿TODO
当我们执行以下代码时,结果会按1、3、2的顺序弹出。
alert(1);
setTimeout(function() {
alert(2);
},0);
alert(3);
这是事件循环机制,因为js是单线程的,是基于事件循环的。而setTimeout函数是异步的,异步的事件会加入一个队列,会等到当前同步的任务执行完毕后,再执行setTimeout队列的任务。所以,通过设置任务在延迟0毫秒后执行,就能改变任务执行的先后顺序,延迟该任务发生,改变它所调用的函数的优先级,使之异步执行。
例:
- 下面这段代码,是不会实时获取到输入框里面的内容的。
<input type="text" onkeydown="test(this.value)">
<div></div>
<script">
function test(val) {
document.getElementsByTagName('div')[0].innerHTML = val;
}
可以发现,每按下一个字符时,< div > 中只能显示出之前的内容,无法得到当前的字符。结果如下:
- 利用 setTimeout延时为0,我们把取 value 的操作放入队列中,放在更新 value 值以后.
<input type="text" onkeydown="var that=this; setTimeout(function() {test(that.value)}, 0)">
<div></div>
<script">
function test(val) {
document.getElementsByTagName('div')[0].innerHTML = val;
}
能够实时显示输入的内容,结果如下: