使用setTimeout(fn, 0)出现的一个奇怪的现象

Question

代码

html

<p>未使用setTimeout函数</p>

<p id="one">

    <input type="text" id="input" value="">

    <span></span>

</p>

<p>使用setTimeout函数</p>

<p id="second">

    <input type="text" id="input" value="">

    <span></span>

</p>

js

document.querySelector('#one input').onkeydown = function() {

    document.querySelector('#one span').innerHTML = this.value;

}

document.querySelector('#second input').onkeydown = function() {

    setTimeout(function() {

        document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;

    }, 0);

}

现象

Answer 1

onkeydown是在用户按下键盘按键时触发，之后是改变input的值，然后触发onkeyup。所以第一种情况下，回调函数里，span元素设置的是未改变的input的value值。第二种情况是setTimeout把修改span元素的操作放在本次同步事件的后面，而这时input的值已经改变了。如果要达到一样的效果，可以用onkeyup代替。demo

Answer 2

这里其实 和 setTimeout 关系不大， 是onkeydown 事件的关系，首先 你要 了解 这个事件onkeydown 属性在用户（在键盘上）按键时触发onkeypress 事件会在键盘按键被按下并释放一个键时发生。onkeyup 事件会在键盘按键被松开时发生。当用户在第一次按下键的时候 其实值是空， 你可以 onkeydown 事件中 打印下 this.value;

Answer 3

keydown&nbsp;换成&nbsp;keyup&nbsp;就可以了，原因：keydown->value&nbsp;改变->keyup（超过一定间隔没有&nbsp;keyup&nbsp;，会继续&nbsp;keydown&nbsp;）,setTimeout 有个最小间隔，导致捕获到了改变后的 value ,没有setTimeout&nbsp;的时候，直接捕获的是改变前的value,测试戳&nbsp;demo

Answer 4

通俗点说，你输入的内容，并不是立刻赋值到this.value的，他存在一个栈顺序。但用了setTimeout(fn, 0)以后，fn的代码会放到本次执行栈的最后去执行。

Answer 5

首先，延迟设置为0，也不是真正意义上的无延迟;其次，执行到 setTimeout 会加入一个单独的队列中执行，这个队列的任务在主队列没有执行完毕时都不会去执行

Answer 6

document.querySelector('#one input').onkeydown = function() {&nbsp; &nbsp; &nbsp; &nbsp; alert('one');&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('#one span').innerHTML = this.value;&nbsp; &nbsp; }&nbsp; &nbsp; document.querySelector('#second input').onkeydown = function() {&nbsp; &nbsp; &nbsp; &nbsp; alert('second1');&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('second2');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;&nbsp; &nbsp; &nbsp; &nbsp; }, 0);&nbsp; &nbsp; }中间加个alert断点就知道了1.input在键盘按下的时候，onkeydown先执行，再有值，获取不到最后输入的值2.input在键盘按下的时候，onkeydown也是先执行，然后触发一个异步setTimeout，值出现了之后再执行异步的setTimeout，所以能够获得最后输入的值。onkeydown改为onkeyup就可以解决，因为onkeyup是放开按键的时候触发的，所以会先有值先执行onkeyup