Fungsi setTimeout() dalam JavaScript memungkinkan Anda untuk menunda eksekusi suatu fungsi atau blok kode. Fungsi ini umum digunakan untuk mengatur interval waktu, membuat animasi, mengimplementasikan acara berdasarkan waktu, atau menambahkan penundaan pada operasi-asynchronous. Dalam tutorial ini, kita akan menjelajahi cara menggunakan fungsi setTimeout() secara efektif.

Sintaks

Berikut ini adalah sintaks untuk fungsi setTimeout():

setTimeout(fungsi, penundaan, param1, param2, ...);
  • fungsi: Fungsi atau kode yang akan dieksekusi setelah penundaan yang ditentukan.
  • penundaan: Penundaan waktu dalam milidetik sebelum eksekusi fungsi.
  • param1, param2, ...: Parameter opsional yang dapat diteruskan ke dalam fungsi.

Eksekusi Kode dengan Penundaan

Mari kita mulai dengan contoh dasar. Misalkan kita ingin menampilkan pesan setelah penundaan tertentu. Berikut ini adalah contoh penggunaan setTimeout() untuk tujuan tersebut:

setTimeout(function() { console.log("Pesan tertunda ditampilkan!"); }, 2000); // Ditunda selama 2 detik (2000 milidetik)

Dalam contoh ini, fungsi anonim akan dieksekusi setelah penundaan selama 2 detik. Anda dapat mengganti pernyataan console.log() dengan kode apa pun yang Anda inginkan, seperti memperbarui elemen pada halaman web atau memicu animasi.

Membatalkan setTimeout()

Jika Anda perlu membatalkan penundaan yang telah dijadwalkan sebelum dieksekusi, Anda dapat menggunakan fungsi clearTimeout(). Fungsi ini membutuhkan ID timer yang dikembalikan oleh setTimeout(). Berikut ini contohnya:

var timerId = setTimeout(function() { console.log("Ini tidak akan ditampilkan!"); }, 2000); clearTimeout(timerId);

Dalam contoh ini, fungsi clearTimeout() mencegah kode yang tertunda dieksekusi, sehingga pesan tidak ditampilkan.

Mengirimkan Parameter

Anda juga dapat mengirimkan parameter tambahan ke dalam fungsi yang dieksekusi oleh setTimeout(). Misalnya, jika Anda memiliki sebuah fungsi yang menerima parameter dan ingin menunda eksekusinya sambil meneruskan parameter tersebut:

function sapa(nama) { console.log("Halo, " + nama + "!"); } setTimeout(sapa, 2000, "John");

Dalam contoh ini, fungsi sapa() akan dieksekusi setelah penundaan selama 2 detik dengan parameter "John" yang diteruskan ke dalamnya.

Eksekusi Berulang dengan setInterval()

Sementara setTimeout() memungkinkan Anda untuk menjalankan kode setelah penundaan, fungsi setInterval() memungkinkan Anda untuk menjalankan kode secara berulang dengan interval waktu tertentu. Berikut ini contohnya:

var intervalId = setInterval(function() { console.log("Pesan berulang ditampilkan!"); }, 1000); // Berulang setiap 1 detik (1000 milidetik)

Dalam contoh ini, fungsi anonim akan dieksekusi setiap 1 detik. Anda dapat menyesuaikan interval sesuai kebutuhan Anda.

Untuk menghentikan eksekusi kode yang berulang, Anda dapat menggunakan fungsi clearInterval() dan meneruskan ID interval yang diperoleh dari setInterval():

clearInterval(intervalId);

Kesimpulan

Fungsi setTimeout() dalam JavaScript merupakan alat yang powerful untuk menambahkan penundaan dalam eksekusi kode, mengimplementasikan acara berdasarkan waktu, dan membuat animasi. Dengan memahami penggunaannya serta fungsi terkait seperti clearTimeout() dan setInterval(), Anda dapat memanfaatkan potensi penuh operasi berbasis waktu dalam JavaScript.

Dalam tutorial ini, kita membahas dasar-dasar penggunaan setTimeout() dan menjelajahi beberapa skenario seperti eksekusi kode terlambat, pembatalan, pengiriman parameter, dan eksekusi berulang dengan setInterval(). Dengan pengetahuan ini, Anda dapat meningkatkan interaktivitas dan responsivitas aplikasi JavaScript Anda.

Jangan ragu untuk bereksperimen dan menjelajahi lebih lanjut untuk menemukan berbagai kemungkinan yang ditawarkan oleh setTimeout(). Selamat mencoba!