Vòng lặp sự kiện là một trong những khái niệm thú vị và thường bị hiểu sai nhất trong JavaScript. Bài viết này sẽ giúp bạn hiểu rõ cơ chế hoạt động của vòng lặp sự kiện thông qua các ví dụ thực tế, bỏ qua những lý thuyết phức tạp.
Vòng lặp sự kiện là gì?
Bạn đã sẵn sàng khám phá “ma thuật” đằng sau vòng lặp sự kiện trong JavaScript chưa? Hãy cùng tìm hiểu cách JavaScript quản lý nhiều tác vụ cùng lúc, ví dụ như thực thi mã, chờ phản hồi API và xử lý tương tác của người dùng. Vòng lặp sự kiện hoạt động giống như một người quản lý bận rộn tại một bữa tiệc, đảm bảo mọi tác vụ đều được chú ý đúng thứ tự.
JavaScript vốn là ngôn ngữ đơn luồng, tức là nó chỉ có thể xử lý một tác vụ tại một thời điểm trên luồng chính. Vậy làm thế nào JavaScript có thể tạo ra “ảo giác” đa nhiệm? Câu trả lời chính là vòng lặp sự kiện.
Hãy khám phá trong các ví dụ sau
1. Mã đồng bộ
console.log("1️⃣ Start cooking 🍳"); console.log("2️⃣ Eat breakfast 🍴"); console.log("3️⃣ Wash dishes 🧼"); Output:
1️⃣ Start cooking 🍳 2️⃣ Eat breakfast 🍴 3️⃣ Wash dishes 🧼 Giải thích: Các tác vụ này diễn ra lần lượt (thực hiện đồng bộ).
2. Thêm tác vụ không đồng bộ bằng setTimeout
console.log("1️⃣ Start cooking 🍳"); setTimeout(() => { console.log("2️⃣ Eat breakfast 🍴 (after 3 seconds)"); }, 3000); console.log("3️⃣ Wash dishes 🧼"); Output:
1️⃣ Start cooking 🍳 3️⃣ Wash dishes 🧼 2️⃣ Eat breakfast 🍴 (after 3 seconds) Giải thích:
- Nhiệm vụ setTimeout được gửi đến Web API (không phải là một phần của luồng chính).
- Khi bộ đếm thời gian kết thúc, nó sẽ được đưa vào hàng đợi gọi lại, chờ luồng chính rảnh.
- Vòng lặp sự kiện đảm bảo lệnh gọi lại được thực thi sau các tác vụ đồng bộ.
3. Nhiệm vụ nhỏ so với Nhiệm vụ lớn
Vòng lặp sự kiện ưu tiên các tác vụ nhỏ (như Promise lệnh gọi lại) hơn các tác vụ lớn (như setTimeout). Hãy cùng xem điều này hoạt động như thế nào:
console.log("1️⃣ Start 🍳"); setTimeout(() => { console.log("2️⃣ Macrotask: Timeout ⏳"); }, 0); Promise.resolve().then(() => { console.log("3️⃣ Microtask: Promise ✅"); }); console.log("4️⃣ End 🚀"); Output:
1️⃣ Start 🍳 4️⃣ End 🚀 3️⃣ Microtask: Promise ✅ 2️⃣ Macrotask: Timeout ⏳ Giải thích: Lệnh gọi lại Promise (microtask) chạy trước lệnh gọi lại setTimeout (macrotask), mặc dù setTimeout có độ trễ là 0ms.
4. Xử lý các tác vụ nặng
Bạn đã bao giờ thấy một trang bị đóng băng khi chạy một tác vụ nặng chưa? Hãy khắc phục điều đó bằng mã không đồng bộ.
Sau đây là ví dụ về trường hợp không đúng (Chặn vòng lặp sự kiện)
console.log("1️⃣ Start 🏁"); for (let i = 0; i < 1e9; i++) {} // Simulating heavy task console.log("2️⃣ End 🛑"); Và đây là một ví dụ tốt hơn (Sử dụng setTimeout cho Chunking)
console.log("1️⃣ Start 🏁"); let count = 0; function heavyTask() { if (count < 1e6) { count++; if (count % 100000 === 0) console.log(`Processed ${count} items 🔄`); setTimeout(heavyTask, 0); // Let the event loop breathe! } else { console.log("2️⃣ Task Complete ✅"); } } heavyTask(); Tóm tắt nhanh
1️⃣ JavaScript chạy mã đồng bộ trước.
2️⃣ Các tác vụ không đồng bộ (như setTimeout) được xử lý bởi vòng lặp sự kiện .
3️⃣ Các tác vụ nhỏ (Lời hứa) được ưu tiên hơn các tác vụ lớn (setTimeout).
4️⃣ Chia nhỏ các tác vụ nặng thành các phần bằng cách sử dụng các mẫu không đồng bộ để giữ cho giao diện người dùng phản hồi.