./prontouso.com

ALAT DEVELOPER

Simulator JavaScript Event Loop

Susun urutan atau tempel pernyataan JavaScript yang didukung untuk memodelkan kode sinkron, microtask, timer, callback animasi, dan nextTick Node.js langkah demi langkah.

Status alatBerjalan di browser Anda
Pratinjau
~/js/event-loop-simulator
SIMULATOREVENT LOOP LIVE
Skenario Umum & Prasetel

Pertanyaan wawancara standar: console.log sinkron, setTimeout(0), Promise.then, dan log akhir.

Skrip (Sesuai Urutan Kode)

Model interaktif langkah demi langkah untuk Call Stack, Antrean Microtask, Antrean Tugas, callback animasi, dan nextTick Node.js.

ms
Total Langkah
4
Panggilan Sinkron
2
Microtask
1
Macrotask
1
Siklus Loop
2
Siklus 1Snapshot 1 dari 12
Fase Event Loop & Aturan Model

Mengevaluasi skrip sinkron pada Call Stack.

Call Stack / Tumpukan Panggilan (LIFO)1
<main script>STACK
Antrean Microtask / Job Queue (FIFO)0
(Tidak ada microtask yang menunggu)
Antrean Tugas / Macrotask Queue (FIFO)0
(Tidak ada macrotask yang menunggu)
Web APIs & Timer0
(Tidak ada timer aktif)
Keluaran Konsol
(Belum ada log yang dicetak)

Cara kerja

  1. Masukkan data Anda

    Isi nilai yang diperlukan, tempel teks Anda, atau unggah file yang ingin diproses.

  2. Lihat hasil seketika

    Sebagian besar alat diperbarui secara langsung saat Anda mengetik; beberapa menggunakan satu tombol tindakan.

  3. Gunakan hasil Anda

    Salin, unduh, atau bagikan hasil yang dihasilkan — Anda selalu memiliki kendali penuh atas data Anda.

Privasi dan pemrosesan data — Berjalan secara lokal di browser Anda. Alat ini tidak mengunggah data Anda.

Apa itu Simulator JavaScript Event Loop?

Simulator JavaScript Event Loop memodelkan urutan pernyataan sinkron, job Promise dan queueMicrotask, callback setTimeout, requestAnimationFrame, serta process.nextTick Node.js tanpa menjalankan kodenya.

PAHAMI CARA KERJA ALAT

Cara kerja simulator JavaScript event loop

Pilih prasetel, susun urutan, atau masukkan pernyataan JavaScript yang didukung untuk memeriksa model deterministik call stack dan antrean tugas langkah demi langkah.

Aturan urutan yang ditampilkan model

  • Semua kode sinkron dijalankan lebih dulu dari atas ke bawah.
  • Dalam contoh Node.js, callback process.nextTick dijalankan sebelum antrean Promise dan queueMicrotask biasa.
  • Callback Promise .then dan queueMicrotask dikuras sebelum callback timer berikutnya dalam model ini.
  • Timer diurutkan berdasarkan penundaan yang dimasukkan dan mempertahankan urutan sumber saat nilainya sama; prasetel animasi juga menampilkan fase callback pra-render terpisah milik model.

Cara menggunakan simulator

  • Mulai dengan prasetel, atau tambahkan pernyataan di Penyusun Visual lalu pilih jenis tugas setiap pernyataan.
  • Tetapkan penundaan milidetik nonnegatif untuk tugas setTimeout dan tambahkan pekerjaan bersarang ketika sebuah callback menjadwalkan pernyataan lain.
  • Gunakan kontrol pemutaran dan tampilan antrean untuk mengikuti perubahan keadaan, atau buka tabel untuk melihat urutan akhir model.
  • Salin JavaScript yang dinormalisasi, keluaran simulasi, atau jejak lengkap untuk membandingkan hasil di tempat lain.

Hal yang sengaja disederhanakan

Editor mengenali pola pernyataan yang didukung dan mengubahnya menjadi label untuk model urutan lokal. Editor tidak menjalankan JavaScript arbitrer, menyelesaikan variabel, membuat permintaan jaringan, atau meniru exception dan return value.

Penundaan timer dipakai untuk menentukan urutan relatif yang deterministik, bukan waktu nyata. requestAnimationFrame bergantung pada kesempatan rendering browser, sedangkan process.nextTick milik Node.js; karena itu kedua prasetel tersebut menjelaskan konsep runtime yang berbeda, bukan satu linimasa universal.

Contoh urutan klasik

sinkron, timeout, promise, sinkron

Log sinkron berjalan lebih dulu, dilanjutkan microtask Promise, lalu macrotask timeout.

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

Model lokal tanpa eksekusi kode

Pernyataan dan label tetap berada di memori browser untuk halaman ini. Alat tidak mengunggah, menyimpan, atau menjalankannya sebagai JavaScript; hanya interaksi agregat yang dapat dihitung melalui analitik berbasis persetujuan.

Pertanyaan yang Sering Diajukan (FAQ)

Mengapa callback Promise berjalan sebelum setTimeout(fn, 0)?

Karena checkpoint microtask menguras callback Promise yang sudah mengantre sebelum event loop memilih tugas timer berikutnya. Penundaan 0 ms membuat timer memenuhi syarat; timer tidak menyela tugas saat ini beserta microtask-nya.

Apakah simulator ini mencakup async/await?

Ya, sebagai kelanjutan yang dimodelkan: prasetel async/await dan baris yang didukung berisi await menampilkan pekerjaan setelah await sebagai microtask. Alat tidak menjalankan fungsi async atau menyelesaikan nilainya.

Apakah ini meniru semua detail waktu browser dan Node.js?

Tidak. Urutan inti kode sinkron dan checkpoint microtask ditampilkan, tetapi waktu timer, kesempatan rendering, dan fase Node.js memiliki detail di luar model deterministik ini. Baca prasetel rAF dan process.nextTick sebagai contoh browser dan Node.js yang terpisah.

Bagaimana macrotask dengan penundaan yang sama diurutkan?

Simulator mengurutkan macrotask menurut penundaan dan mempertahankan urutan sumber ketika nilainya sama, sesuai aturan stabil model.

Apakah Editor Kode JS menjalankan kode yang saya tempel?

Tidak. Editor mengenali pola console.log, setTimeout, Promise/.then, queueMicrotask, requestAnimationFrame, process.nextTick, dan await yang didukung, lalu mengubahnya menjadi langkah model. JavaScript yang tidak dikenali diperlakukan sebagai label, bukan dijalankan.

Alat Terkait