This programming guide is only available in Vietnamese. Switch to Vietnamese to read the full article.

Chào mừng bạn đến với bài học thứ 8 - bài học thực hành tổng kết của chuỗi bài tự học JavaScript cốt lõi. Trong các bài học trước, đặc biệt là Bài 4, chúng ta đã thảo luận về mặt lý thuyết cách Event Loop (Vòng lặp sự kiện) điều phối hoạt động bất đồng bộ trong trình duyệt. Tuy nhiên, các luồng đẩy/kéo callback giữa Call Stack, Web APIs, Microtask và Macrotask Queue rất trừu tượng. Bài học này sẽ giúp bạn trực quan hóa hoạt động đó bằng Bộ mô phỏng Event Loop trực quan tương tác nhúng trực tiếp dưới đây.

1. Tầm quan trọng của việc hiểu trực quan Event Loop

Hầu hết các lỗi liên quan đến lập trình bất đồng bộ (như thứ tự hiển thị không đúng của dữ liệu API, trì hoãn giật giao diện do chặn Stack, hoặc thứ tự chạy sai của các hàm hẹn giờ) đều bắt nguồn từ việc hiểu sai cách thức hàng đợi hoạt động:

• Call Stack nghẽn: Khi một đoạn mã đồng bộ (như tính toán vòng lặp lớn) đang chiếm đóng Call Stack, trình duyệt hoàn toàn bị "đóng băng", không thể nổi bọt sự kiện click, cuộn trang hay vẽ lại màn hình (Render).
• Sự khác biệt Microtask vs Macrotask: Microtask luôn được xử lý ưu tiên tuyệt đối trước khi bước sang vòng lặp Macrotask mới. Do đó, một chuỗi Promise lồng nhau liên tục tạo mới Microtask con sẽ vĩnh viễn chặn Macrotask (như setTimeout) thực thi.

2. Trình mô phỏng tương tác Event Loop Visualizer

Dưới đây là ứng dụng mô phỏng trực quan luồng chạy của JavaScript Engine. Bạn hãy thực hiện các bước sau để tương tác:

1. Chọn một trong ba kịch bản mã nguồn mẫu từ menu thả xuống (Promise vs setTimeout, Chuỗi lồng nhau nhiều Microtasks, Async/Await luồng tuần tự).
2. Nhấn nút "Chạy từng bước" (Step) để tự mình kiểm soát và dịch chuyển mã nguồn qua Call Stack, Web APIs và các hàng đợi theo từng nhịp xử lý của JS Engine.
3. Hoặc nhấn nút "Chạy tự động" (Auto) để ứng dụng chạy mô phỏng liên tục với tốc độ vừa phải kèm chú giải chạy cập nhật real-time bên dưới.
4. Quan sát Console Output ở cuối để xem kết quả hiển thị cuối cùng tương ứng.

3. Câu hỏi trắc nghiệm tổng kết