./prontouso.com

CÔNG CỤ LẬP TRÌNH

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

Hiểu rõ cơ chế bất đồng bộ của JavaScript qua mô phỏng tương tác từng bước: xem Call Stack thực thi, Microtask Queue (Promises) và Macrotask/Callback Queue (setTimeout).

Trạng thái công cụChạy trên trình duyệt của bạn
Xem trước

Script (in source order)

Execution order

Step 1console.log('1')Sync (console.log)
Step 2console.log('4')Sync (console.log)
Step 3Promise.resolve().then(() => log('3'))Microtask (Promise.then)
Step 4setTimeout(() => log('2'), 0)Macrotask (setTimeout)

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ì?

Build a small script out of synchronous code, microtasks, and macrotasks to see the exact order the JavaScript event loop would run it in.

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

How the JavaScript event loop simulator works

The event loop's rules

  • All synchronous code runs first, top to bottom.
  • Once the synchronous code finishes, the entire microtask queue (Promise .then callbacks, queueMicrotask) drains before anything else runs.
  • Then the next macrotask (setTimeout, setInterval) runs, immediately followed by draining the microtask queue again — and this repeats for each macrotask.

How to use it

  • Add steps and mark each as sync, microtask, or macrotask.
  • Give a macrotask a delay in milliseconds — it affects the order relative to other macrotasks.
  • Read the computed execution order on the right.

Common gotchas

A `setTimeout(fn, 0)` never runs before a `Promise.resolve().then(fn)`, even with a 0ms delay — every microtask always drains before the next macrotask starts. This surprises most people the first time they see it.

Classic ordering example

sync, timeout, promise, sync

Synchronous logs run first, then the promise microtask, then the timeout macrotask.

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

Script simulation notes

The steps you add are labels for a local ordering model; the tool does not execute arbitrary JavaScript code.

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

Why does the Promise callback run before setTimeout(fn, 0)?

Because microtasks always fully drain before the event loop picks up the next macrotask, regardless of the macrotask's delay — a 0ms timeout is not "immediate", it's just the shortest possible macrotask delay.

Does this cover async/await?

Not directly as its own step type, but async/await is built on promises under the hood — an `await` suspends and resumes as a microtask, the same as a `.then()` callback would.

Is this ordering guaranteed across all browsers?

Yes — the relative ordering of "microtasks fully drain between macrotasks" is part of the HTML/ECMAScript specification, not an implementation detail, so every spec-compliant JavaScript engine follows it.

How are macrotasks with the same delay ordered?

The simulator sorts macrotasks by delay and keeps source order for ties, matching the stable ordering used in the model.

Công Cụ Liên Quan