Event Loop trong Javascript

Javascript trong browser

Javascript Engine

Bạn có thể hình dung về Call stack giống như một chồng đĩa xếp từ thấp lên cao, chiếc đĩa xếp cuối cùng ở đỉnh chồng đĩa, nó sẽ được lấy ra sớm nhất và chiếc đĩa ở ngay dưới nó sẽ là chiếc tiếp theo... Mỗi lệnh được nạp vào Call stack theo trình tự xếp đĩa, còn trả về giống như lấy dần đĩa từ trên đỉnh

/* Trong file main.js */

var firstFunction = function () {  
  console.log("I'm first!");
};

var secondFunction = function () {  
  firstFunction();
  console.log("I'm second!");
};

secondFunction();

/* Kết quả:
 * => I'm first!
 * => I'm second!
 */

Vậy còn Event Loop thì sao?

/* Trong file main.js */

var firstFunction = function () {  
 console.log("I'm first!");
};

var secondFunction = function () {  
 setTimeout(firstFunction, 5000);
 console.log("I'm second!");
};

secondFunction();

/* Kết quả:
 * => I'm second!
 * (Và sau 5 giây)
 * => I'm first!
 */

Và sau đây là thứ tự hoạt động trong Call stack

• Sau khi secondFunction() được đặt vào Call stack, hàm setTimeout() được gọi và cũng được đặt vào Call stack

   

• Ngay sau khi hàm setTimeout() thực thi, browser đặt hàm callback của nó (trong trường hợp này là hàm firstFunction) vào trong một Event table (bảng sự kiện). Hãy nghĩ Event table như một quầy đăng ký: call stack sẽ đăng ký với Event table một hàm nào đó sẽ chỉ được thực thi khi có một sự kiện cụ thể nào đó xảy ra. Và khi sự kiện đó xảy ra, Event table sẽ di chuyển hàm đã đăng ký sang Event queue (hàng đợi). Event queue chỉ đơn giản là một địa điểm cho các hàm chờ được gọi và di chuyển sang Call stack.

  Bạn cũng có thể hỏi: "Vậy chính xác thì khi nào các hàm trong Event queue di chuyển sang Call stack?". Vâng, Javascript tuân theo một quy luật rất đơn giản: Có một process liên tục kiểm tra xem có Call stack nào rỗng không, và nếu rỗng thì nó sẽ kiểm tra Event queue có hàm nào đang đợi hay không. Nếu có thì hàm đầu tiên trong Event queue sẽ được gọi và di chuyển sang Call stack. Nếu Event queue rỗng thì process này vẫn tiếp tục chạy vô thời hạn. Và những cái mà tôi vừa miêu tả chính là Event loop!

• Quay trở lại với ví dụ trên, thực thi hàm setTimeout() sẽ di chuyển hàm callback của nó (trong trường hợp này là firstFunction) vào Event table và đăng ký nó với một thời gian delay là 5 giây

   

• Chú ý rằng, một khi hàm callback được di chuyển đến Event table, không có bất kì đoạn code nào bị block. Browser sẽ không chờ 5 giây trước khi thực hiện tác vụ khác, mà thay vào đó nó sẽ thực thi dòng lệnh tiếp theo trong secondFunction() là log ra chuỗi "I'm second!"

   

 

• Tại thời điểm này secondFunction() và main.js đã thực thi xong

   

 

• 5 giây sau đó, Event table sẽ di chuyển hàm firstFunction() sang Event queue

   

 

• Event loop liên tục kiểm tra Call stack và hiện tại nó phát hiện call stack đang rỗng nên gọi firstFunciton và tạo ra một Call stack mới

   

• Một khi firstFunction được thực thi xong, chúng ta trở lại trạng thái Call stack rỗng, Event table không còn hàm nào để lắng nghe và Event queue cũng rỗng

   

Kết luận

Hy vọng qua bài viết này các bạn sẽ hiểu rõ hơn về cơ chế hoạt động bất đồng bộ trong Javascript, giúp chúng ta dễ dàng hơn trong việc phát triển các ứng dụng dựa trên Javascript đặc biệt là các ứng dụng web.

 

Bài viết được dịch có chỉnh sửa từ www.altitudelabs.com