./prontouso.com

CÔNG CỤ LẬP TRÌNH

Mô Phỏng Vòng Lặp Sự Kiện JS (Event Loop)

Tạo một chuỗi hoặc dán các câu lệnh JavaScript được hỗ trợ để mô hình hóa mã đồng bộ, microtask, timer, callback hoạt họa và nextTick của Node.js theo từng bước.

Trạng thái công cụChạy trên trình duyệt của bạn
Xem trước
~/js/event-loop-simulator
SIMULATOREVENT LOOP TRỰC TIẾP
Kịch Bản Mẫu & Cài Đặt Sẵn

Câu hỏi phỏng vấn chuẩn: console.log đồng bộ, setTimeout(0), Promise.then và log kết thúc.

Mã Nguồn (Theo Thứ Tự Viết)

Mô hình tương tác từng bước cho Call Stack, Hàng Đợi Microtask, Hàng Đợi Tác Vụ, callback hoạt họa và nextTick của Node.js.

ms
Tổng Số Bước
4
Lệnh Đồng Bộ
2
Microtasks
1
Macrotasks
1
Chu Kỳ Vòng Lặp
2
Chu kỳ 1Ảnh chụp 1 / 12
Giai Đoạn Event Loop & Quy Tắc Mô Hình

Đang đánh giá mã đồng bộ chính trên Call Stack.

Call Stack / Ngăn Xếp Gọi (LIFO)1
<main script>STACK
Hàng Đợi Microtask / Job Queue (FIFO)0
(Không có microtask chờ)
Hàng Đợi Tác Vụ / Macrotask Queue (FIFO)0
(Không có macrotask chờ)
Web APIs & Bộ Hẹn Giờ0
(Không có bộ hẹn giờ hoạt động)
Kết Quả Console
(Chưa có dữ liệu log nào được in)

Cách thức hoạt động

  1. Nhập dữ liệu của bạn

    Điền các giá trị cần thiết, dán văn bản hoặc tải lên tệp bạn muốn xử lý.

  2. Xem kết quả tức thì

    Hầu hết các công cụ cập nhật theo thời gian thực khi bạn nhập liệu; một số công cụ sử dụng một nút hành động duy nhất.

  3. Sử dụng kết quả

    Sao chép, tải xuống hoặc chia sẻ kết quả được tạo — bạn luôn có toàn quyền kiểm soát dữ liệu của mình.

Quyền riêng tư & xử lý dữ liệu — Chạy cục bộ 100% trên trình duyệt của bạn. Công cụ này không tải dữ liệu của bạn lên máy chủ.

Mô Phỏng Vòng Lặp Sự Kiện JS (Event Loop) là gì?

Trình Mô Phỏng JavaScript Event Loop mô hình hóa thứ tự của câu lệnh đồng bộ, job Promise và queueMicrotask, callback setTimeout, requestAnimationFrame và process.nextTick của Node.js mà không thực thi mã.

TÌM HIỂU CÁCH HOẠT ĐỘNG CỦA CÔNG CỤ

Cách hoạt động của trình mô phỏng JavaScript event loop

Chọn kịch bản mẫu, tạo một chuỗi hoặc nhập các câu lệnh JavaScript được hỗ trợ để xem từng bước mô hình xác định của call stack và các hàng đợi tác vụ.

Các quy tắc thứ tự được mô hình thể hiện

  • Toàn bộ mã đồng bộ chạy trước, từ trên xuống dưới.
  • Trong ví dụ Node.js, callback process.nextTick chạy trước hàng đợi Promise và queueMicrotask thông thường.
  • Callback Promise .then và queueMicrotask được xử lý hết trước callback bộ hẹn giờ tiếp theo trong mô hình này.
  • Bộ hẹn giờ được sắp theo độ trễ đã nhập và giữ thứ tự nguồn khi độ trễ bằng nhau; kịch bản hoạt họa cũng hiển thị pha callback trước khi kết xuất riêng của mô hình.

Cách sử dụng trình mô phỏng

  • Bắt đầu bằng một kịch bản mẫu, hoặc thêm câu lệnh trong Trình Tạo Trực Quan rồi chọn loại tác vụ cho từng câu lệnh.
  • Đặt độ trễ mili-giây không âm cho tác vụ setTimeout và thêm công việc lồng khi một callback lên lịch câu lệnh khác.
  • Dùng các nút phát và chế độ xem hàng đợi để theo dõi thay đổi trạng thái, hoặc mở bảng để xem thứ tự cuối cùng của mô hình.
  • Sao chép JavaScript đã chuẩn hóa, kết quả mô phỏng hoặc toàn bộ dấu vết để đối chiếu ở nơi khác.

Những điểm trình mô phỏng chủ ý đơn giản hóa

Trình soạn thảo nhận dạng các mẫu câu lệnh được hỗ trợ và chuyển chúng thành nhãn cho mô hình thứ tự cục bộ. Công cụ không thực thi JavaScript tùy ý, phân giải biến, gửi yêu cầu mạng hay tái hiện exception và return value.

Độ trễ bộ hẹn giờ được dùng để tạo thứ tự tương đối xác định thay vì mô phỏng thời gian thực. requestAnimationFrame phụ thuộc vào cơ hội kết xuất của trình duyệt, còn process.nextTick thuộc Node.js; vì vậy hai kịch bản đó giải thích các khái niệm runtime riêng biệt, không phải một dòng thời gian chung.

Ví dụ thứ tự kinh điển

đồng bộ, timeout, promise, đồng bộ

Các log đồng bộ chạy trước, tiếp theo là microtask Promise, rồi đến macrotask timeout.

log(1); setTimeout(2); Promise.then(3); log(4) -> 1, 4, 3, 2

Mô hình cục bộ, không thực thi mã

Các câu lệnh và nhãn chỉ nằm trong bộ nhớ trình duyệt của trang này. Công cụ không tải lên, lưu trữ hay thực thi chúng dưới dạng JavaScript; chỉ các tương tác tổng hợp mới có thể được đếm qua hệ thống phân tích dựa trên sự đồng ý.

Các Câu Hỏi Thường Gặp (FAQ)

Vì sao callback Promise chạy trước setTimeout(fn, 0)?

Vì checkpoint microtask xử lý hết các callback Promise đang chờ trước khi event loop chọn tác vụ bộ hẹn giờ tiếp theo. Độ trễ 0 ms chỉ làm timer đủ điều kiện; nó không ngắt tác vụ hiện tại hoặc các microtask của tác vụ đó.

Trình mô phỏng có hỗ trợ async/await không?

Có, dưới dạng phần tiếp tục được mô hình hóa: kịch bản async/await và các dòng được hỗ trợ có await biểu diễn công việc sau await như một microtask. Công cụ không chạy hàm async hoặc phân giải giá trị của hàm.

Công cụ có tái hiện mọi chi tiết thời gian của trình duyệt và Node.js không?

Không. Thứ tự cốt lõi của mã đồng bộ và checkpoint microtask được thể hiện, nhưng thời gian timer, cơ hội kết xuất và các pha Node.js có chi tiết nằm ngoài mô hình xác định này. Hãy xem kịch bản rAF và process.nextTick như các ví dụ riêng cho trình duyệt và Node.js.

Các macrotask có cùng độ trễ được sắp xếp thế nào?

Trình mô phỏng sắp macrotask theo độ trễ và giữ thứ tự nguồn khi bằng nhau, đúng với quy tắc sắp xếp ổn định của mô hình.

Trình Soạn Thảo Mã JS có chạy mã tôi dán vào không?

Không. Trình soạn thảo nhận dạng các mẫu console.log, setTimeout, Promise/.then, queueMicrotask, requestAnimationFrame, process.nextTick và await được hỗ trợ rồi chuyển chúng thành các bước của mô hình. JavaScript không được nhận dạng sẽ trở thành nhãn chứ không được thực thi.

Công Cụ Liên Quan