一、介紹

1. 什么是js的事件循環

JavaScript事件循環是一種處理異步事件和回調函數的機制，它是JavaScript實現異步編程的核心。它在瀏覽器或Node.js環境中運行，用于管理任務隊列和調用棧，以及在適當的時候執行回調函數。

2. 為什么會出現js的事件循環

JavaScript事件循環是為了解決JavaScript作為單線程語言時的并發性問題而設計的。由于JavaScript是單線程的，因此在執行代碼時不能同時執行多個任務。這種單一線程的特性可能會導致JavaScript在處理某些長時間運行的操作（如網絡請求、文件系統訪問等）時出現阻塞，從而影響用戶體驗。

為了解決這些問題，JavaScript引入了異步編程模型和事件循環機制，它可以監聽消息隊列中的事件并根據優先級順序依次執行相應的回調函數。這種機制允許JavaScript在等待某些操作完成的同時，可以執行其他任務，從而避免了阻塞，提高了效率和并發性，使得開發者可以使用異步編程模型來處理復雜的、長時間運行的操作，同時提供更好的用戶體驗。

3. 事件循環的流程

事件循環中的任務分為兩類：同步任務和異步任務。同步任務是按照代碼順序依次執行的任務，而異步任務則是在任務隊列中等待執行的任務，例如定時器回調函數、事件回調函數和Promise回調函數等。異步任務又可以分為宏任務和微任務，微任務的執行優先級高于宏任務。當一個宏任務中的所有微任務都執行完畢后，才會執行下一個宏任務。事件循環的工作流程是不斷地從任務隊列中取出任務并執行，直到隊列為空為止。

二、事件循環的應用場景

1. DOM 事件處理：通過監聽 DOM 事件（例如 click、scroll 等），可以使用事件循環來異步更新 UI 或執行其他操作。
2. 定時器：使用 setTimeout() 和 setInterval() 函數可以創建定時器，用于在指定時間間隔之后執行相應的操作。這些操作會被作為異步任務添加到任務隊列中等待執行。
3. 網絡請求：當 JavaScript 需要發送網絡請求時，可以使用 XMLHttpRequest 或 fetch API 發送異步請求，并將響應數據作為異步任務加入到任務隊列中等待處理。
4. Promise 和 async/await：Promise 和 async/await 是 JavaScript 中常用的異步編程方式，實際上它們底層都是基于事件循環機制實現的。通過將回調函數封裝為 Promise 對象或 async 函數，可以讓異步代碼更加易讀、易維護。
5. Web Workers：Web Workers 可以讓 JavaScript 在多線程環境下運行，從而避免阻塞主線程。Web Workers 使用了與事件循環類似的消息隊列機制來實現異步通信。

三、例子

1. 定時器回調函數

console.log('start');
setTimeout(() => {
  console.log('timer');
}, 0);
console.log('end');
// 輸出結果
// start
// end
// timer

這是因為setTimeout()方法是異步執行的，它會在指定時間后將回調函數添加到任務隊列中等待執行。因此，在輸出"start"和"end"之后，程序立即返回，等到下一個事件循環時才執行定時器回調函數。

2. Promise回調函數

console.log('start');
Promise.resolve().then(() => {
  console.log('promise');
});
console.log('end');
// 輸出結果
// start
// end
// promise

這是因為Promise回調函數是微任務，它的執行優先級高于宏任務，因此在輸出"start"和"end"之后，先執行Promise回調函數，再執行下一個宏任務。

3. 事件回調函數

console.log('start');
document.addEventListener('click', () => {
  console.log('click');
});
console.log('end');
// 輸出結果
// start
// end

這是因為事件回調函數需要等待用戶操作才能觸發，因此在程序執行完畢之后，等待用戶操作后才會將回調函數添加到任務隊列中等待執行。

四、復雜例子思考

async function a() {
  console.log('async-a');
  await b();
  console.log('async-b');
};

async function b() {
  console.log('async-b');
};
console.log('start');

setTimeout(()=>{
  console.log('setTimeout-1');
},1000);
setTimeout(()=>{
  console.log('setTimeout-2');

  new Promise((resolve,reject)=>{
    console.log('setTimeout-promise');
    resolve('promise-1');
  }).then(res => {
    console.log(res);
  })
},0);

new Promise((resolve,reject)=>{
  console.log('promise');
  resolve('promise-2');
}).then(res => {
  console.log(res);
});

a();

console.log('end')

五、一句話總結

JavaScript事件循環是一種處理異步事件和回調函數的機制，它是JavaScript實現異步編程的核心。它會不斷地從任務隊列中取出任務并執行，直到任務隊列為空為止。事件循環中的任務分為同步任務和異步任務，異步任務又可以分為宏任務和微任務，微任務的執行優先級高于宏任務。