用定時器實現JavaScript異步執行

逆戰班學習心得

JavaScript是一門基於對象的弱類型語言，它作為瀏覽器腳本語言，主要用途是負責與頁面的交互，以及操作DOM，它的執行環境是單線程的，默認情況JS是同步加載的，也就是 JS的加載是阻塞的，也就是說同一時間只能完成一件事，只能自上而下執行,萬一上一行解析代碼的時間很長,那么下面的代碼就會被阻塞。對於用戶而言,阻塞就意味着"卡死",這樣就導致了很差的用戶體驗。

為了解決這個問題，利用多核CPU的計算能力，於是出現了同步和異步

同步操作，任務遵循隊列順序，異步操作，就相當於並線了，因此異步任務不具有阻塞效應。同步任務都是在主線程中執行,形成了一個執行棧，直到主線程空閑時,才會去事件隊列中查看是否有可執行的異步任務,如果有就推入主進程中。

JS是通過回調函數實現異步的。

一旦用了setTimeout()，里面的回調函數就是異步代碼，加入了任務隊列，延時調用一個函數不馬上執行，而是要等待主隊列為空，並達到定的延時時間才會執行，而且只會執行一次。

我們來通過下面一個例子來理解

setTimeout(function(){
console.log("1")
},500)
console.log("2")
setTimeout(function(){
console.log("3")
},300)
setTimeout(function(){
console.log("5")
},0)
console.log("4")

 

上面一段代碼的輸出結果為

2

4

5

3

1

從輸出結果中，我們就可以看書JS執行的順序，2和4都為主隊列的同步任務，一開始就執行，執行順序是從上到下。

setTimeout()中的函數，無論寫在JS代碼中的哪個位置，設置的時間即使是0，都為異步執行，在任務隊列中，從主線程執行一開始，就進行計時，一旦主線程空閑，時間短的就立即加入到主線程開始執行，時間長的依然在等待。所以根據設定的等待時間，執行順序為5,3,1

利用setInterval（）實現異步執行

定時器的執行原理與延時器相似，只是不清除定時器，他就會反復執行。

console.log("1")
setInterval(function(){
console.log("2")
},300)
console.log("3")

總結，異步執行的兩個必要條件就是

1.  主隊列空閑     
2.  到達執行時間