js單線程中的同步和異步
2020/11/16 14:33:22 閱讀：2787
發布者：2787
單線程
（1）單線程的概念
JavaScript是一門單線程的語言，因此，JavaScript在同一個時間只能做一件事，單線程意味著，如果在同個時間有多個任務的話，這些任務就需要進行排隊，前一個任務執行完，才會執行下一個任務，比如說下面這段代碼
// 同步代碼
function fun1() {
console.log(1);
}
function fun2() {
console.log(2);
}
fun1();
fun2();
// 輸出
1
2
很容易可以看出，輸出會依次輸入1,2，因為代碼是從上到下依次執行，執行完fun1()，才繼續執行fun2()，但是如果fun1()中的代碼執行的是讀取文件或者ajax操作，文件的讀取和數據的獲取都需要一定時間，難道我們需要完全等到fun1()執行完才能繼續執行fun2()么？為了解決這個問題，后面我們會介紹同步和異步的概念
（2）為什么是單線程
其實，JavaScript的單線程，與它的用途是有很大關系，我們都知道，JavaScript作為瀏覽器的腳本語言，主要用來實現與用戶的交互，利用JavaScript，我們可以實現對DOM的各種各樣的操作，如果JavaScript是多線程的話，一個線程在一個DOM節點中增加內容，另一個線程要刪除這個DOM節點，那么這個DOM節點究竟是要增加內容還是刪除呢？這會帶來很復雜的同步問題，因此，JavaScript是單線程的
同步任務和異步任務
（1）為什么會有同步和異步
因為JavaScript的單線程，因此同個時間只能處理同個任務，所有任務都需要排隊，前一個任務執行完，才能繼續執行下一個任務，但是，如果前一個任務的執行時間很長，比如文件的讀取操作或ajax操作，后一個任務就不得不等著，拿ajax來說，當用戶向后臺獲取大量的數據時，不得不等到所有數據都獲取完畢才能進行下一步操作，用戶只能在那里干等著，嚴重影響用戶體驗
因此，JavaScript在設計的時候，就已經考慮到這個問題，主線程可以完全不用等待文件的讀取完畢或ajax的加載成功，可以先掛起處于等待中的任務，先運行排在后面的任務，等到文件的讀取或ajax有了結果后，再回過頭執行掛起的任務，因此，任務就可以分為同步任務和異步任務
（2）同步任務
同步任務是指在主線程上排隊執行的任務，只有前一個任務執行完畢，才能繼續執行下一個任務，當我們打開網站時，網站的渲染過程，比如元素的渲染，其實就是一個同步任務
（3）異步任務
異步任務是指不進入主線程，而進入任務隊列的任務，只有任務隊列通知主線程，某個異步任務可以執行了，該任務才會進入主線程，當我們打開網站時，像圖片的加載，音樂的加載，其實就是一個異步任務
（4）異步機制
那么，JavaScript中的異步是怎么實現的呢？那要需要說下回調和事件循環這兩個概念啦
首先要先說下任務隊列，我們在前面也介紹了，異步任務是不會進入主線程，而是會先進入任務隊列，任務隊列其實是一個先進先出的數據結構，也是一個事件隊列，比如說文件讀取操作，因為這是一個異步任務，因此該任務會被添加到任務隊列中，等到IO完成后，就會在任務隊列中添加一個事件，表示異步任務完成啦，可以進入執行棧啦~但是這時候呀，主線程不一定有空，當主線程處理完其它任務有空時，就會讀取任務隊列，讀取里面有哪些事件，排在前面的事件會被優先進行處理，如果該任務指定了回調函數，那么主線程在處理該事件時，就會執行回調函數中的代碼，也就是執行異步任務啦
單線程從從任務隊列中讀取任務是不斷循環的，每次棧被清空后，都會在任務隊列中讀取新的任務，如果沒有任務，就會等到，直到有新的任務，這就叫做任務循環，因為每個任務都是由一個事件觸發的，因此也叫作
事件循環
異步運行機制如下：
（1）所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。
（2）主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
（3）一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行。
（4）主線程不斷重復上面的第三步。
只要主線程空了，就會去讀取"任務隊列"，這就是JavaScript的運行機制。這個過程會不斷重復。
"任務隊列"是一個事件的隊列（也可以理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務可以進入"執行棧"了。主線程讀取"任務隊列"，就是讀取里面有哪些事件。
"任務隊列"中的事件，除了IO設備的事件以外，還包括一些用戶產生的事件（比如鼠標點擊、頁面滾動等等），比如$(selectot).click(function)，這些都是相對耗時的操作。只要指定過這些事件的回調函數，這些事件發生時就會進入"任務隊列"，等待主線程讀取。
所謂"回調函數"（callback），就是那些會被主線程掛起來的代碼，前面說的點擊事件$(selectot).click(function)中的function就是一個回調函數。異步任務必須指定回調函數，當主線程開始執行異步任務，就是執行對應的回調函數。例如ajax的success，complete，error也都指定了各自的回調函數，這些函數就會加入“任務隊列”中，等待執行。
