Memahami WEB API, Event Loop & Callback queue.

Kita tahu bahwa Call Stack adalah tempat di mana semua eksekusi Javascript dilakukan. Jika Call Stack memiliki beberapa operasi/tugas yang harus dilakukan maka operasi lain di browser web akan berhenti dirender. Misalnya, jika Anda memiliki for-loop yang sangat besar antara 1 hingga beberapa juta maka fungsi di Call Stack akan menjalankan operasinya hingga for-loop berakhir, hal ini akan menyebabkan web browser tidak responsif jika pengoperasian memerlukan waktu lama untuk dijalankan.

Untuk mengatasi kelemahan di atas, browser web memperkenalkan Web API, WEB API digunakan untuk menangani operasi Javascript setiap kali ada tugas yang membutuhkan waktu lama untuk dieksekusi di Call Stack dengan mengimplementasikan beberapa . Metode Web API seperti,

  1. setWaktu habis,
  2. setInterval,
  3. Panggilan AJAX (permintaan xmlhttp)

Saya akan menjelaskan ini dengan sebuah contoh,

function message() {
      return 'Good Morning';
}
setTimeout(function timeout() {
    console.log('Click the button!');
}, 5000);
message();

Dalam Javascript, eksekusi dilakukan dari atas ke bawah atau baris demi baris. Pertama, penerjemah akan menunjuk ke metode pesan tetapi tidak menemukan fungsi yang dapat dipanggil, kemudian ia akan menunjuk ke metode setTimeout dan setTimeout adalah API Web sehingga akan berpindah ke API Web dari Call Stack. Dan selanjutnya penerjemah akan menunjuk ke metode callable message() dan memanggil metode pesan dan mengembalikan string 'Selamat Pagi'. Di sini dua kali entri dibuat ke Call Stack dan muncul dari Call Stack setelah pesan kembali.

Sementara itu di Web API, setelah 5 ms, metode Web API push timeout() ke Callback Queue. Antrian Panggilan Balik adalah tempat di mana semua fungsi yang keluar dari Web API akan berada, mengikuti struktur data antrian yaitu FIFO (pertama masuk pertama keluar) yang berarti fungsi pertama yang didorong ke antrian Panggilan Balik dari Web API akan menjadi fungsi pertama yang akan muncul dari antrian Callable ke Call Stack melalui Event Loop.

Event Loop: Event Loop memeriksa Call Stack secara terus menerus untuk mendorong fungsi yang dijalankan sebagian dari Callback Queue ke Call Stack untuk eksekusi lebih lanjut. Untuk ini, Event Loop perlu mengonfirmasi bahwa tidak ada fungsi aktif yang berjalan di Call Stack dan harus kosong.

Bahkan jika Anda menyetel fungsi Timeout ke 0 ms, metode timeout() juga akan dijalankan pada akhirnya.

Kesimpulan:

Proses perputaran dari Call Stack ke Web API, dan dari Web API ke Callback Queue, dan dari Callback Queue ke Call Stack melalui event loop adalah proses lengkap bagaimana Javascript bekerja di dalam browser web.