Memahami Eksekusi JavaScript: Menggunakan setTimeout dan Promises untuk Menentukan Perilaku Sinkron vs. Asinkron

Memahami Bagaimana JavaScript Mengeksekusi Kode: Pola Sinkron dan Asinkron

JavaScript adalah bahasa single-thread, artinya ia mengeksekusi satu baris kode dalam satu waktu. Memahami cara menangani tugas sinkron dan asinkron sangat penting bagi pengembang. Seringkali, pertanyaan tentang topik ini muncul dalam wawancara teknis, sehingga penting untuk memahami konsep ini secara menyeluruh.

Ketika pengembang menggunakan fungsi seperti setWaktu habis atau Janji, alur eksekusi mungkin tampak agak tidak terduga pada awalnya. Namun, dengan mengikuti struktur yang jelas, Anda dapat menentukan urutan pasti bagian-bagian berbeda dari kode Anda akan dieksekusi. Ini sangat penting ketika berhadapan dengan panggilan balik Dan antrian acara.

Dalam contoh ini, kami akan menguraikan bagaimana JavaScript menangani tugas-tugas sinkron seperti konsol.log dan operasi asinkron seperti setWaktu habis Dan Janji. Di akhir penjelasan ini, Anda akan memiliki pemahaman yang lebih jelas tentang bagaimana event loop JavaScript memprioritaskan dan memproses tugas.

Artikel ini dirancang untuk membantu Anda menentukan urutan eksekusi dalam JavaScript, keterampilan yang berguna saat menangani pertanyaan wawancara atau men-debug kode asinkron. Mari selami contoh praktis untuk mendemonstrasikan konsep dengan jelas.

Menjelajahi Alur Eksekusi JavaScript: Kode Sinkron vs Asinkron

Dalam JavaScript, memahami urutan eksekusi kode sinkron dan asinkron sangatlah penting, terutama saat menangani setWaktu habis Dan Janji. Konsep utama yang harus dipahami adalah bagaimana event loop memproses tugas-tugas sinkron terlebih dahulu dan kemudian melanjutkan untuk menangani tugas-tugas asinkron yang antri. Dalam contoh kode yang diberikan, dua log pertama ("A" dan "F") bersifat sinkron, artinya log tersebut dieksekusi sesuai urutan kemunculannya dalam kode. Saat dijalankan, skrip segera menjadwalkan tugas asinkron seperti setTimeout untuk diproses nanti.

Fungsi setTimeout adalah cara umum untuk menunda operasi, sehingga menimbulkan kesan penundaan dalam alur eksekusi. Dalam hal ini, keduanya setWaktu habis fungsi digunakan untuk menambahkan log konsol "B" dan "E" ke antrian acara. Penting untuk dicatat bahwa meskipun "E" memiliki penundaan 0 milidetik, ia masih masuk antrian setelah operasi sinkron saat ini dan tugas mikro selesai. Memahami perbedaan halus ini sangat penting dalam menentukan urutan eksekusi untuk tugas JavaScript yang lebih kompleks.

Di dalam yang pertama setWaktu habis panggilan balik, log "B" dicetak terlebih dahulu karena masih merupakan bagian dari antrian tugas sinkron, yang diprioritaskan. Kemudian, dalam panggilan balik itu, janji yang telah diselesaikan dibuat Janji. Tekad. Hal ini memicu tugas mikro yang memastikan log "D" terjadi setelah "B" tetapi sebelum tugas lain dalam antrean peristiwa utama. Perilaku Promises yang ditempatkan dalam antrean tugas mikro inilah yang memungkinkan "D" dicatat sebelum panggilan balik setTimeout kedua mencatat "E". Dengan demikian, tugas mikro lebih diprioritaskan daripada tugas asinkron standar.

Untuk meringkas urutan eksekusi akhir: "A" dan "F" dicatat secara sinkron, diikuti oleh "B", yang dimasukkan ke dalam antrian pada setTimeout pertama. Janji yang terselesaikan menyebabkan "D" dicatat berikutnya sebagai tugas mikro. Terakhir, "E" dicatat terakhir karena merupakan bagian dari detik setWaktu habis panggilan balik. Pemahaman tentang alur eksekusi JavaScript, yang menggabungkan tugas-tugas sinkron, loop peristiwa, dan tugas-tugas mikro, sangat berharga ketika menjawab pertanyaan wawancara atau men-debug kode asinkron dalam proyek kehidupan nyata.

console.log("A");
setTimeout(() => {
    console.log("B");
    Promise.resolve("C").then(() => console.log("D"));
}, 1000);
setTimeout(() => console.log("E"), 0);
console.log("F");

console.log("Start");
setTimeout(() => {
    console.log("Middle");
}, 500);
Promise.resolve().then(() => {
    console.log("Promise 1");
});
console.log("End");

Pelajari Lebih Dalam Perulangan Peristiwa dan Prioritas Tugas JavaScript

Aspek kunci dari perilaku asinkron JavaScript adalah lingkaran peristiwa, yang bertanggung jawab menangani eksekusi callback, janji, dan kode asinkron lainnya. Perulangan peristiwa ini terus-menerus memeriksa apakah tumpukan panggilan kosong, dan jika ya, ia memproses tugas dari antrean panggilan balik dan antrean tugas mikro. Memahami bagaimana tugas diprioritaskan dalam antrean ini sangat penting untuk memastikan kode berperilaku sesuai yang diharapkan, terutama saat menangani setWaktu habis dan janji secara bersamaan.

Antrean tugas mikro lebih diutamakan daripada antrean panggilan balik. Tugas seperti menjanjikan resolusi ditempatkan dalam antrean tugas mikro, artinya tugas tersebut dieksekusi sebelum tugas tertunda apa pun dari antrean panggilan balik, meskipun setTimeout memiliki penundaan nol. Inilah sebabnya dalam contoh kode, log "D" dari janji dieksekusi sebelum log "E" dari setTimeout kedua. Sangat penting bagi pengembang untuk memahami hal ini ketika menulis kode yang menggabungkan operasi asinkron untuk menghindari perilaku yang tidak terduga.

Dalam aplikasi dunia nyata, operasi asinkron seperti panggilan API atau pengatur waktu sering kali berinteraksi dengan kode sinkron. Dengan mengetahui cara kerja loop peristiwa, antrean panggilan balik, dan antrean tugas mikro, pengembang dapat memprediksi hasil kode mereka dengan lebih baik. Hal ini sangat penting ketika mengoptimalkan kinerja atau men-debug skrip kompleks di mana keduanya operasi asinkron dan kode sinkron sering berinteraksi.