使用setTimeout(fn, 0)出現的一個奇怪的現象

代碼

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>

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);
}

現象

回答

編輯回答

苦妄

keydown 換成 keyup 就可以了，

原因：keydown->value 改變->keyup（超過一定間隔沒有 keyup ，會繼續(xù) keydown ）,setTimeout 有個最小間隔，導致捕獲到了改變后的 value ,沒有setTimeout 的時候，直接捕獲的是改變前的value,測試戳 demo

2018年5月29日 02:29

編輯回答

愿如初

setTimeout延遲設置為0時，是把當前的操作放到事件隊列的的最后去執(zhí)行，因為此時的事件隊列最后的事件其實是click事件，所以也就是click事件完成之后才執(zhí)行setTimeout里的內容。

且click事件執(zhí)行過程中，監(jiān)聽事件是keydown執(zhí)行之后,接著給輸入框賦值，click的后續(xù)的事件還有keyup,keyup事件之執(zhí)行之后，然后才算是完成了點擊事件，才從事件隊列里出棧。

2017年8月7日 11:30

編輯回答

小眼睛

onkeydown是在用戶按下鍵盤按鍵時觸發(fā)，之后是改變input的值，然后觸發(fā)onkeyup。
所以第一種情況下，回調函數里，span元素設置的是未改變的input的value值。第二種情況是setTimeout把修改span元素的操作放在本次同步事件的后面，而這時input的值已經改變了。
如果要達到一樣的效果，可以用onkeyup代替。
demo

2017年7月2日 02:10

編輯回答

維她命

這里其實和 setTimeout 關系不大，是onkeydown 事件的關系，

首先你要了解這個事件

onkeydown 屬性在用戶（在鍵盤上）按鍵時觸發(fā)
onkeypress 事件會在鍵盤按鍵被按下并釋放一個鍵時發(fā)生。
onkeyup 事件會在鍵盤按鍵被松開時發(fā)生。

當用戶在第一次按下鍵的時候其實值是空，你可以 onkeydown 事件中打印下 this.value;

2018年3月5日 07:30

編輯回答

入她眼

通俗點說，
你輸入的內容，并不是立刻賦值到this.value的，他存在一個棧順序。
但用了setTimeout(fn, 0)以后，fn的代碼會放到本次執(zhí)行棧的最后去執(zhí)行。

2017年11月19日 20:20

編輯回答

茍活

首先，延遲設置為0，也不是真正意義上的無延遲;其次，執(zhí)行到 setTimeout 會加入一個單獨的隊列中執(zhí)行，這個隊列的任務在主隊列沒有執(zhí)行完畢時都不會去執(zhí)行

2017年1月22日 12:15

編輯回答

兔囡囡

document.querySelector('#one input').onkeydown = function() {
        alert('one');
        document.querySelector('#one span').innerHTML = this.value;
    }
    document.querySelector('#second input').onkeydown = function() {
        alert('second1');
        setTimeout(function() {
            alert('second2');
            document.querySelector('#second span').innerHTML = document.querySelector('#second input').value;
        }, 0);
    }

中間加個alert斷點就知道了
1.input在鍵盤按下的時候，onkeydown先執(zhí)行，再有值，獲取不到最后輸入的值
2.input在鍵盤按下的時候，onkeydown也是先執(zhí)行，然后觸發(fā)一個異步setTimeout，值出現了之后再執(zhí)行異步的setTimeout，所以能夠獲得最后輸入的值。

onkeydown改為onkeyup就可以解決，因為onkeyup是放開按鍵的時候觸發(fā)的，所以會先有值先執(zhí)行onkeyup

2018年8月15日 10:13