一、介紹

1. 什么是js的事件循環(huán)

JavaScript事件循環(huán)是一種處理異步事件和回調(diào)函數(shù)的機制，它是JavaScript實現(xiàn)異步編程的核心。它在瀏覽器或Node.js環(huán)境中運行，用于管理任務隊列和調(diào)用棧，以及在適當?shù)臅r候執(zhí)行回調(diào)函數(shù)。

2. 為什么會出現(xiàn)js的事件循環(huán)

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

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

3. 事件循環(huán)的流程

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

二、事件循環(huán)的應用場景

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

三、例子

1. 定時器回調(diào)函數(shù)

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

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

2. Promise回調(diào)函數(shù)

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

這是因為Promise回調(diào)函數(shù)是微任務，它的執(zhí)行優(yōu)先級高于宏任務，因此在輸出"start"和"end"之后，先執(zhí)行Promise回調(diào)函數(shù)，再執(zhí)行下一個宏任務。

3. 事件回調(diào)函數(shù)

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

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

四、復雜例子思考

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')

五、一句話總結(jié)

JavaScript事件循環(huán)是一種處理異步事件和回調(diào)函數(shù)的機制，它是JavaScript實現(xiàn)異步編程的核心。它會不斷地從任務隊列中取出任務并執(zhí)行，直到任務隊列為空為止。事件循環(huán)中的任務分為同步任務和異步任務，異步任務又可以分為宏任務和微任務，微任務的執(zhí)行優(yōu)先級高于宏任務。