JS如何利用阻塞機制實現停留幾秒sleep

JS實現停留幾秒sleep，Js中for循環的阻塞機制，setTimeout延遲執行

//第一種，使用while循環
function sleep(delay) {
    var start = (new Date()).getTime();
    while((new Date()).getTime() - start < delay) {
        continue;
    }
}

//或者使用for循環
function sleep(delay) {
    for(var t = Date.now(); Date.now() - t <= d;);
}

這種實現方式是利用一個僞死循環阻塞主線程。因爲JS是單線程的。所以通過這種方式可以實現真正意義上的sleep()。
Js阻塞機制，跟Js引擎的單線程處理方式有關，每個window一個JS線程。所謂單線程，在某個特定的時刻只有特定的代碼能夠被執行，並阻塞其它的代碼。
由於瀏覽器是事件驅動的（Event driven），因此瀏覽器中很多行爲是異步（Asynchronized）的，很容易有事件被同時或者連續觸發。當異步事件發生時，會創建事件並放入執 行隊列中，等待當前代碼執行完成之後再執行這些代碼，如鼠標點擊事件發生、定時器觸發事件發生、XMLHttpRequest完成回調這些事件，都會被放 入執行隊列中等待。關於Js的阻塞機制，可以看下面一段代碼，一般，我們會認爲，這段代碼會log出來0,1,2

for(var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, (i + 1) * 1000);
}

而實際上，這段代碼log出來的結果是 3,3,3。這是js新手很容易遇到的問題，具體原因就是因爲for循環的阻塞機制。在上面的代碼中，setTimeout這個定時器需要等待for循環 執行完成，而for循環執行完成了之後，i已經爲3了，此時纔開始執行setTimeout，因此console.log(i)會是3。至於爲什麼i會是3，請回顧一下for循環的執行順序，當i爲2的時候，滿足循環條件，執行代碼塊，然後i++，此時i爲3，不滿足循環條件，不執行代碼塊，循環停止。對於for循環，記住，是在不滿足條件的情況下停止循環，對於以上代碼，可以看出，i=3的時候纔不滿足。

怎麼解決事件阻塞

for(var i = 0; i < 3; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, (i + 1) * 1000);
    })(i)
}

再上面的代碼中，我們加了一個立即執行的匿名函數，並且將for循環的i作爲實參傳入進去。這樣，setTimeout就會被立即執行，而不會等待（這裏不太瞭解細節，就不多說了，大概猜測爲新開了一個臨時的線程，立即執行匿名函數，然後再立即切換回來）。本文主要在說明如何解決這一類問題，對於底層原理，還待繼續挖掘。注意：html5支持Web worker功能，可以寫多線程。