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的時候才不滿足。

怎么解決事件阻塞

其實，阻塞作為js引擎的處理方式，我們最好不要想著解決“阻塞”，而是讓我們想執行的代碼，插入到“主線程”中。這么說比較不易理解，還是以上面的代碼為例，直接上代碼好了

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

再上面的代碼中，我們加了一個立即執行的匿名函數，并且將for循環的i作為實參傳入進去。這樣，setTimeout就會被立即執行，而不會等待（這里不太了解細節，就不多說了，大概猜測為新開了一個臨時的線程，立即執行匿名函數，然后再立即切換回來）。

本文主要在說明如何解決這一類問題，對于底層原理，還待繼續挖掘。

注意：html5支持Web worker功能，可以寫多線程。

轉載于:https://www.cnblogs.com/hq233/p/8042995.html

總結

以上是生活随笔為你收集整理的Js中for循环的阻塞机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。