Pernah liat banner promo yang muncul 5 detik setelah kamu masuk website? Atau notifikasi "Live: 23 orang lagi liat produk ini" yang update tiap detik? Itu kerjaan timer JavaScript. setTimeout bilang ke browser "tunggu X milidetik, terus jalanin kode ini sekali", setInterval bilang "ulangi terus tiap X milidetik". Power buat bikin pengalaman web yang dinamis tanpa user harus refresh.

💡 Awas memory leak. setInterval yang gak pernah di-clearInterval() jalan terus walau user pindah halaman — bocor memori. Aturan emas: tiap kali bikin timer, mikirin "kapan dia harus berhenti?" Dan implement clear-nya. Bug paling sering di Single Page Application.

setTimeout — jalankan sekali setelah jeda:

setTimeout(function() {
  console.log("Muncul setelah 2 detik");
}, 2000); // 2000 milidetik = 2 detik

setInterval — jalankan berulang:

let hitungan = 0;

const idInterval = setInterval(function() {
  hitungan++;
  console.log("Hitungan: " + hitungan);

  if (hitungan >= 5) {
    clearInterval(idInterval); // hentikan interval
  }
}, 1000);

Membatalkan timer:

const idTimeout = setTimeout(function() {
  console.log("Ini tidak akan muncul");
}, 5000);

clearTimeout(idTimeout); // batalkan sebelum sempat jalan

Poin penting:

• setTimeout mengembalikan ID yang bisa digunakan untuk clearTimeout
• setInterval mengembalikan ID yang bisa digunakan untuk clearInterval
• Timer bersifat asynchronous — kode setelah setTimeout/setInterval tetap jalan tanpa menunggu timer selesai
• Waktu dalam milidetik (1000 ms = 1 detik)

🎭 Analogi sehari-hari

setTimeout = alarm sekali bunyi ("ingatkan saya 2 menit lagi"). setInterval = alarm berulang ("ingatkan saya tiap 5 menit"). clearTimeout/clearInterval = matikan alarm sebelum bunyi.

⚠️ Jebakan yang sering ditemui

1. setTimeout(..., 0) BUKAN langsung — menunggu queue kosong dulu.

setTimeout(() => console.log("a"), 0);
console.log("b");
// output: b, a  (bukan a, b)

2. Lupa clearInterval = memory leak + interval terus jalan walau halaman pindah. Selalu simpan ID dan clear di unmount/cleanup.

3. setInterval bisa drift kalau callback lambat — tidak menunggu callback selesai. Untuk akurasi, pakai setTimeout rekursif.

4. Argumen delay minimum 4ms di browser modern (untuk timer berulang). Jangan harap mikro-detik akurasi.

🎯 setTimeout vs setInterval vs requestAnimationFrame — pilih yang mana?

• Sekali jalan setelah X ms (delay banner promo, debounce) → setTimeout
• Berulang tiap X ms (polling status, countdown timer) → setInterval
• Animasi smooth 60fps (motion, scroll effect, canvas redraw) → requestAnimationFrame
• Idle background work (preload, analytics) → requestIdleCallback
• High precision tick (timer aplikasi yang gak boleh drift) → setTimeout rekursif (lebih akurat dari setInterval)

Aturan: untuk visual updates SELALU requestAnimationFrame — sync dengan refresh layar, gak run pas tab gak aktif (hemat battery). setInterval bisa drift kalau callback lambat. setTimeout lebih predictable untuk polling.