Menggali lebih dalam tentang JavaScript Timers

Ketika menulis kode JavaScript, terkadang kamu ingin menunda eksekusi suatu kode atau ingin menjadwalkan suatu kode berdasarkan waktu interval.

Kali ini penulis ingin menjelaskan lebih dalam tentang function yang sudah JavaScript sediakan, setTimeout, setInterval, dan menggunakannya ketika jumpa kasus tertentu.

SetTimeout

Ketika kamu mengetik JavaScript, mungkin kamu kepikiran untuk menunda suatu eksekusi dari sebuah function karena alasan tertentu.

Ini adalah tugas dari setTimeout. Kamu perlu menentukan function (dalam bentuk callback) yang akan dieksekusi nanti, dan nilai berupa angka yang menyatakan berapa milidetik fungsi tersebut tertunda untuk dieksekusi:

setTimeout(() => {
  //jalan setelah 2 detik
}, 2000)

setTimeout(() => {
  // jalan setelah 50 milidetik
}, 50)

Sintak ini mendefinisikan sebuah fungsi baru, kamu bisa memanggil fungsi lain, atau kamu dapat meneruskan nama fungsi yang sudah ada, dan juga serangkaian parameter:

const myFunction = (paramPertama, paramKedua) => {
  // lakukan sesuatu
}

// jalan setelah 2 detik
setTimeout(myFunction, 2000, paramPertama, paramKedua)

setTimeout mengembalikan id timer. Umumnya jarang digunakan, tapi kamu bisa menyimpan id ini untuk menghapus function yang sudah dijadwalkan berjalan:

const id = setTimeout(() => {
  // jalan setelah 2detik
}, 2000)

//berubah pikiran...
clearTimeout(id)

Zero Delay

Jika kamu atur 0, callback function akan di eksekusi secepatnya, tetapi setelah fungsi saat ini dieksekusi:

setTimeout(() => {
  console.log('setelah ')
},0)

console.log(' sebelum ')

Maka akan tercetak `sebelum sesudah`.

Sangat berguna ketika ingin menghindari blocking pada CPU untuk task yang intensif dan membiarkan function lainnya dieksekusi saat sedang melakukan kalkulasi berat, dengan mengantrikan function dalam penjadwalan.

Beberapa browser (IE dan Edge) mengimplementasi method setImmediate() yang fungsionalitasnya sama persis, tapi itu bukanlah merupakan standard dan tidak tersedia pada browser lainnya, melainkan function standard yang digunakan oleh Node.js sendiri.

setInterval()

setInterval mirip dengan setTimeout, hanya saja sedikit perbedaan, alih-alih menjalankan callback function sekali, callback function jalan berulang-ulang dalam jarak waktu yang kamu tentukan (dalam milidetik):

setInterval(() => {
  //jalan setiap 2 detik
},2000)

Function yang diletakan didalam blok tersebut akan jalan setiap 2 detik, kecuali kamu hentikan menggunakan clearInterval sekaligus menyertakan interval id sebagai parameternya, yang mana id interval tersebut dikembalikan oleh setInterval sendiri:

const id = setInterval(() => {
  // jalan setiap 2 detik
}, 2000)

clearInterval(id)

Hal yang biasa dilakukan adalah ketika memanggil clearInterval di dalam callback function nya setInterval, biasanya untuk otomatis-menentukan apakah suatu eksekusi perlu dilakukan berulang atau berhenti. Contoh kode berikut mendemokan bagaimana sesuatu akan terus berjalan hingga sesuatuYangDitunggu nilainya menjadi telah_tiba:

const interval = setInterval(() => {
  if(App.sesuatuYangDitunggu === 'tiba_tiba') {
    clearInterval(interval)
    return
  }
  // selain itu, lakukan sesuatu
}, 100)

Recursive setTimeout

setInterval memulai function yang dilampirkan kepadanya setiap n milidetik, tanpa mempertimbangkan kapan dapat function menyelesaikan eksekusinya.

Berikut penulis tunjukan skenario visualnya.

Jika sebuah function menyelesaikan task nya dalam waktu yang sama, tidak masalah:

Atau mungkin beberapa function perlu memakan waktu yang berbeda-beda, tergantung kondisi jaringan misalnya:

Dan bahkan mungkin waktu eksekusi yang panjang, menyebabkan eksekusi selanjutnya tertimpa dengan yang sebelumnya:

Untuk menghindari hal semacam ini, kamu bisa membuat suatu recursive setTimeout terjadwal yang dipanggil ketika callback function selesai dieksekusi:

const myFunction = () => {
  // lakukan sesuatu
  setTimeout(myFunction, 1000)
}

setTimeout(myFunction(), 1000)

Maka skenario visual akan seperti ini:

setTimeout dan setInterval tersedia di Node.js, melalui module timers yang dimilikinya.

Node.js juga menawarkan method setImmediate() yang mirip dengan setTimeout(() => {}, 0), sering digunakan ketika berurusan dengan Event Loop Node.js.