Timer: setTimeout dan setInterval

Kode yang berjalan nanti

Kadang kode tidak harus jalan sekarang. Timer menjadwalkan fungsi untuk dijalankan setelah jeda waktu tertentu.

setTimeout: sekali, setelah jeda

console.log("Mulai");

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

console.log("Selesai");
// output: "Mulai", "Selesai", lalu 2 detik kemudian "Muncul..."

Perhatikan: "Selesai" tercetak duluan. setTimeout tidak menghentikan program, ia hanya menjadwalkan. Program lanjut jalan, fungsi callback dieksekusi nanti.

setInterval: berulang tiap jeda

let detik = 0;
let id = setInterval(() => {
  detik++;
  console.log("Detik ke-" + detik);
  if (detik >= 5) {
    clearInterval(id); // hentikan
    console.log("Berhenti");
  }
}, 1000);

Membatalkan timer

Kedua fungsi mengembalikan ID yang bisa dipakai untuk membatalkan:

let timeoutId = setTimeout(() => console.log("tidak akan muncul"), 5000);
clearTimeout(timeoutId); // dibatalkan sebelum jalan

let intervalId = setInterval(() => console.log("tick"), 1000);
clearInterval(intervalId); // berhenti

Lupa clearInterval adalah sumber umum memori bocor: interval terus jalan meski tidak dibutuhkan lagi.

Contoh: debounce sederhana

let timer;
document.querySelector("#cari").addEventListener("input", (e) => {
  clearTimeout(timer); // batalkan jadwal sebelumnya
  timer = setTimeout(() => {
    console.log("Cari: " + e.target.value);
  }, 500); // jalan 500ms setelah user berhenti mengetik
});

Pola debounce ini dipakai di kolom pencarian agar request tidak dikirim tiap ketikan.

Catatan teknis: Waktu timer tidak presisi. setTimeout(..., 1000) berarti "jalankan minimal 1 detik dari sekarang", bisa lebih lama kalau event loop sibuk. Jangan pakai timer untuk pengukuran waktu yang butuh presisi, pakai Date.now() untuk itu.

Studi kasus: countdown sederhana

Timer cocok untuk hitung mundur:

let sisa = 10;
let tampilan = document.querySelector("#countdown");

let id = setInterval(() => {
  tampilan.textContent = sisa + " detik";
  sisa--;
  if (sisa < 0) {
    clearInterval(id);
    tampilan.textContent = "Waktu habis!";
  }
}, 1000);

Pola umumnya: simpan state di variabel (sisa), update tiap tick, hentikan dengan clearInterval saat kondisi tercapai. Variasi latihan: buat stopwatch dengan tombol mulai/berhenti, atau tampilkan jam digital yang update tiap detik memakai Date di dalam interval.

requestAnimationFrame untuk animasi

Untuk animasi, ada API yang lebih baik daripada setInterval:

let posisi = 0;
function gerak() {
  posisi += 2;
  document.querySelector("#kotak").style.left = posisi + "px";
  if (posisi < 300) requestAnimationFrame(gerak);
}
requestAnimationFrame(gerak);

requestAnimationFrame disinkronkan dengan refresh rate layar (biasanya 60fps) dan otomatis berhenti saat tab tidak terlihat, menghemat baterai. Aturannya: timer untuk jeda logika, requestAnimationFrame untuk animasi visual.

Kesimpulan

setTimeout untuk tunda sekali, setInterval untuk pengulangan. Selalu simpan ID-nya dan batalkan saat tidak dibutuhkan. Pahami bahwa timer bersifat non-blocking: kode setelahnya tetap jalan duluan.