Dalam web development, setInterval dalam JavaScript diibaratkan seperti asisten virtual yang bisa menjalankan tugas-tugas secara otomatis pada interval waktu tertentu, tanpa perlu diingatkan lagi.

Mulai dari memperbarui informasi di layar, membuat animasi, hingga mengatur penghitung waktu mundur untuk event penting, setInterval menjadi kunci untuk semua ini.

Namun, bagaimana cara kerjanya? Mengapa setInterval menjadi elemen penting dalam toolkit setiap web developer? Dan yang terpenting, bagaimana kita dapat menggunakannya untuk menghindari jebakan umum yang sering terjadi? Siapkan dirimu untuk menyelami lebih dalam, karena artikel ini tidak hanya menjelaskan konsepnya, tapi juga memberikan contoh-contoh praktis yang bisa langsung kamu terapkan dalam proyekmu!

Apa itu setInterval?

setInterval dalam JavaScript adalah sebuah metode untuk menjalankan fungsi secara berulang pada interval waktu yang telah ditentukan. Metode ini sangat berguna untuk tugas-tugas yang memerlukan eksekusi berkala, seperti memperbarui UI, polling data, atau membuat animasi.

Salah satu kekuatan utama dari setInterval adalah fleksibilitas. Fungsi yang dijalankan bisa sangat sederhana, seperti menampilkan pesan di console, atau lebih kompleks, seperti meng-update data yang ditampilkan di halaman web. Kamu juga bisa menghentikan eksekusi berulang ini dengan menggunakan clearInterval, di mana proses ini membutuhkan ID interval yang dikembalikan oleh setInterval saat pertama kali dipanggil.

Cara kerja setInterval cukup sederhana. Kamu menentukan sebuah fungsi yang ingin dijalankan dan interval waktu untuk menjalankannya, diukur dalam milidetik. Misalnya, jika kamu ingin menampilkan pesan atau melakukan update setiap 10 detik, kamu bisa menggunakan setInterval dengan interval waktu 10000 milidetik (karena 1 detik sama dengan 1000 milidetik).

Namun, perlu diingat bahwa setInterval memiliki beberapa keterbatasan dan pertimbangan.

Meskipun fungsi yang dijadwalkan dengan setInterval akan tetap berjalan pada interval yang ditentukan, output dari fungsi tersebut kemungkinan mengalami delay jika ada tugas lain yang sedang berjalan. Dalam kasus seperti ini, penggunaan callback bisa menjadi solusi untuk memastikan urutan eksekusi yang tepat.

Selain itu, penggunaan setInterval yang tidak hati-hati juga bisa menyebabkan masalah performa, khususnya jika fungsi yang dijalankan memerlukan sumber daya besar atau dijalankan dengan interval singkat. Oleh karena itu, penting untuk menimbang dengan cermat frekuensi dan sumber daya yang dibutuhkan oleh fungsi yang dijadwalkan dengan setInterval.

Sintaks setInterval

Menggunakan setInterval dalam JavaScript memerlukan pemahaman tentang sintaksis dasarnya. Sintaks ini adalah fondasi untuk menjalankan fungsi secara berkala. Mari kita bahas lebih detail.

Adapun sintaks dasar dari setInterval adalah sebagai berikut:

• Fungsi: ini adalah fungsi yang akan dijalankan secara berulang. Fungsi bisa berupa fungsi yang telah didefinisikan sebelumnya atau sebuah fungsi anonim langsung di tempat.
• IntervalWaktu: ini adalah durasi waktu antara setiap eksekusi fungsi, diukur dalam milidetik (ms). 1000 ms sama dengan 1 detik. Jadi, jika kamu ingin fungsi dijalankan setiap 5 detik, interval waktunya adalah 5000 ms.

Contoh Penggunaan setInterval

Berikut beberapa contoh yang menunjukkan bagaimana setInterval JavaScript dapat digunakan dalam berbagai skenario berbeda:

Contoh 1: menampilkan waktu secara real-time

Salah satu penggunaan umum setInterval adalah untuk menampilkan waktu yang terus diperbarui di halaman web. Contohnya:

Dalam contoh di atas, fungsi tampilkanWaktu memperbarui elemen dengan ID jam di halaman web dengan waktu saat ini, setiap detik.

Contoh 2: membuat animasi sederhana

setInterval juga bisa dipakai untuk membuat animasi sederhana. Misalnya, menggerakkan elemen di halaman web:

Contoh 3: penghitung mundur

Penggunaan lain yang populer adalah membuat penghitung mundur:

Pada contoh di atas, setInterval diterapkan untuk mengurangi nilai waktuTersisa setiap detik dan menampilkan pesan ketika waktu habis.

Contoh 4: Throttle dengan setInterval

Throttle membatasi jumlah kali fungsi dapat dijalankan dalam jangka waktu tertentu. Ini berguna untuk mengontrol jumlah panggilan fungsi dalam kasus seperti pencarian yang dijalankan saat user mengetik.

Dalam contoh throttle di atas, fungsi lakukanPencarian tidak akan dijalankan lebih dari sekali dalam setiap 500 ms, tidak peduli seberapa sering event input terjadi.

FAQ (Frequently Ask Question)

Bagaimana cara stop setInterval JavaScript?

Untuk menghentikan eksekusi yang dijadwalkan dengan setInterval dalam JavaScript, kamu perlu menggunakan fungsi clearInterval. Proses ini melibatkan dua langkah utama:

Langkah 1: menyimpan ID interval

Ketika kamu mengatur setInterval, ia mengembalikan sebuah ID unik yang dapat digunakan untuk merujuk interval tersebut. Kamu perlu menyimpan ID ini jika ingin menghentikan interval nanti. Contoh:

Dalam contoh ini, intervalID adalah variabel yang menyimpan ID dari interval yang dijadwalkan.

Langkah 2: menggunakan clearInterval untuk menghentikan interval

Untuk menghentikan interval, gunakan clearInterval dan berikan ID interval yang ingin dihentikan sebagai argumennya. Contoh:

Setelah baris ini dijalankan, interval yang dijadwalkan dengan ID intervalID akan berhenti, lalu fungsi yang sebelumnya dijalankan secara berkala tidak akan dijalankan lagi.