Vòng lặp sự kiện (event loop)
Vòng lặp sự kiện (event loop) là một thành phần cốt lõi trong nền tảng chạy của JavaScript, đóng vai trò điều phối việc thực thi mã theo kiểu đơn luồng (single-threaded) nhưng vẫn tạo được cảm giác đồng thời (concurrency) cho các tác vụ bất đồng bộ (asynchronous). Nó đảm nhiệm ba nhiệm vụ chính:
Quản lý Ngăn Xếp Cuộc Gọi (Call Stack): Ngăn xếp cuộc gọi theo dõi các hàm đang được thực thi hiện tại cùng các biến cục bộ của chúng. Vòng lặp sự kiện đẩy các hàm vào ngăn xếp cuộc gọi để thực thi và loại chúng ra khỏi ngăn xếp khi chúng hoàn thành hoặc gặp lỗi.
Xử lý Hàng Đợi Tác Vụ (Task Queue): Hàng đợi tác vụ (đôi khi được gọi là hàng đợi message) là một cấu trúc dữ liệu chứa các callback và promise đang chờ được thực thi. Các tác vụ bất đồng bộ (như yêu cầu mạng, timeout, sự kiện DOM) lên lịch các callback được thêm vào hàng đợi.
Xử lý Sự Kiện (Event): Vòng lặp sự kiện theo dõi các sự kiện khác nhau có thể kích hoạt việc thực thi mã JavaScript, chẳng hạn như tương tác của người dùng (nhấp chuột, nhấn phím), sự kiện của trình duyệt (DOMContentLoaded, thay đổi kích thước cửa sổ) và hết thời gian chờ. Nó thêm các trình xử lý sự kiện (hàm) được liên kết với các sự kiện này vào hàng đợi tác vụ.
Hoạt động cốt lõi của Vòng lặp sự kiện:
Vòng lặp liên tục: Vòng lặp sự kiện là một chu kỳ không bao giờ kết thúc, chạy miễn là chương trình JavaScript đang được thực thi.
Kiểm tra Ngăn xếp Cuộc gọi: Nó liên tục kiểm tra ngăn xếp cuộc gọi. Nếu ngăn xếp cuộc gọi trống (không có hàm nào đang được thực thi), vòng lặp sự kiện chuyển sang bước tiếp theo.
Xử lý Hàng đợi Tác vụ: Nếu ngăn xếp cuộc gọi trống, vòng lặp sự kiện lấy mục đầu tiên (callback hoặc promise) từ hàng đợi tác vụ và đẩy nó vào ngăn xếp cuộc gọi để thực thi.
Xử lý Sự kiện: Vòng lặp sự kiện cũng xử lý bất kỳ sự kiện nào mới được kích hoạt và thêm các trình xử lý tương ứng của chúng vào hàng đợi tác vụ.
Quay lại Bắt đầu: Khi một hàm hoàn thành thực thi hoặc ném lỗi, nó sẽ bị loại khỏi ngăn xếp cuộc gọi và vòng lặp sự kiện lặp lại quy trình, bắt đầu từ bước 1.
Những điểm chính:
JavaScript là đơn luồng, nghĩa là nó chỉ có thể thực thi một hàm tại một thời điểm trên ngăn xếp cuộc gọi.
Các tác vụ bất đồng bộ không chặn ngăn xếp cuộc gọi, cho phép giao diện người dùng (UI) vẫn phản hồi.
Callback, promise và async/await là các cơ chế được sử dụng để quản lý các tác vụ bất đồng bộ và lên lịch thực thi mã trong hàng đợi tác vụ.
Vòng lặp sự kiện đảm bảo cả mã đồng bộ (trong ngăn xếp cuộc gọi) và các tác vụ bất đồng bộ (trong hàng đợi tác vụ) được thực thi một cách phối hợp và hiệu quả.
Minh họa:
Hãy tưởng tượng một người phục vụ duy nhất (ngăn xếp cuộc gọi) trong một nhà hàng (chương trình JavaScript). Người phục vụ chỉ có thể nhận một đơn hàng (hàm) tại một thời điểm. Khách hàng (các tác vụ bất đồng bộ) có thể đặt hàng (lên lịch callback) mà không cần đợi người phục vụ hoàn thành phục vụ bàn hiện tại. Người quản lý (vòng lặp sự kiện) theo dõi các đơn hàng đang chờ (hàng đợi tác vụ) và đảm bảo người phục vụ nhận chúng theo lượt khi họ rảnh.
Lợi ích của Vòng lặp sự kiện:
Xử lý hiệu quả các tác vụ bất đồng bộ mà không chặn UI.
Tạo cảm giác đồng thời trong môi trường đơn luồng.
Cho phép xây dựng các ứng dụng web phức tạp, tương tác.
Hiểu biết về vòng lặp sự kiện là rất cần thiết để viết mã JavaScript có cấu trúc tốt và phản hồi nhanh, đặc biệt là khi xử lý các tác vụ bất đồng bộ.
Last updated