Event Loop trong JavaScript là gì?

JavaScript là ngôn ngữ lập trình hoạt động theo mô hình đơn luồng (single-threaded). Điều này có nghĩa là tại một thời điểm, nó chỉ có thể thực hiện một tác vụ duy nhất. Tuy nhiên, thực tế JavaScript vẫn có thể xử lý nhiều tác vụ bất đồng bộ như tải dữ liệu từ server, xử lý sự kiện người dùng. Điều này được thực hiện nhờ vào cơ chế gọi là Event Loop.

Cơ chế hoạt động của Event Loop

Call Stack

Khi JavaScript chạy, nó sử dụng Call Stack (ngăn xếp gọi hàm) để xử lý các hàm một cách tuần tự. Những hàm này được thực thi ngay lập tức.

Callback Queue và Microtask Queue

Các tác vụ bất đồng bộ như hàm setTimeout, request API hoặc các sự kiện (nhấp chuột, cuộn trang,…) sẽ không được thực thi ngay. Thay vào đó, chúng được đưa vào các hàng đợi riêng biệt gọi là Callback Queue hoặc Microtask Queue.

Event Loop

Event Loop liên tục kiểm tra trạng thái của Call Stack. Khi Call Stack rỗng, Event Loop sẽ lần lượt lấy các tác vụ từ Microtask Queue trước, sau đó mới đến Callback Queue để thực thi.

Ví dụ minh họa

Dưới đây là ví dụ cụ thể giúp bạn dễ hiểu hơn về cách Event Loop hoạt động:

console.log("Bắt đầu thực thi chương trình");

// setTimeout là hàm hẹn giờ phổ biến trong JavaScript
setTimeout(() => {
  console.log("Chạy sau setTimeout 0 giây");
}, 0);

// Promise.resolve là một phương thức quan trọng trong xử lý Promise
Promise.resolve().then(() => {
  console.log("Promise thực hiện ngay khi có thể");
});

console.log("Kết thúc thực thi chương trình chính");

Kết quả hiển thị

Bắt đầu thực thi chương trình
Kết thúc thực thi chương trình chính
Promise thực hiện ngay khi có thể
Chạy sau setTimeout 0 giây

Tại sao kết quả lại như vậy?

Kết quả này xảy ra là do Promise được đưa vào Microtask Queue, vốn ưu tiên cao hơn Callback Queue. Vì vậy, nó thực thi trước tác vụ setTimeout dù setTimeout có thời gian hẹn giờ là 0 giây.

Kết luận

Nhờ Event Loop, JavaScript có thể xử lý mượt mà các tác vụ bất đồng bộ. Qua đó, giữ cho giao diện người dùng luôn phản hồi nhanh, giúp trải nghiệm người dùng mượt mà hơn.

Xem thêm:

REST API vs Stream API: Hiểu sự khác biệt và cách sử dụng

WordPress functions.php: Cách hoạt động, khi nào chạy & sử dụng