Javascript Delay 5 Second

MUAZHAN

3 min read

·

Jun 21, 2024

25

Share

Menunda Eksekusi Kode JavaScript Selama 5 Detik

Dalam pengembangan web, terkadang kita perlu menunda eksekusi kode JavaScript untuk alasan tertentu, seperti:

• Menunggu respon dari server: Sebelum melakukan operasi selanjutnya, kita perlu memastikan bahwa permintaan data dari server telah selesai.
• Menampilkan animasi: Menerapkan efek animasi yang membutuhkan jeda waktu tertentu.
• Meningkatkan pengalaman pengguna: Memberikan waktu bagi pengguna untuk membaca informasi sebelum menampilkan konten berikutnya.

Salah satu cara untuk menunda eksekusi kode JavaScript adalah dengan menggunakan fungsi setTimeout().

Cara Menggunakan setTimeout()

Fungsi setTimeout() menerima dua argumen:

1. Fungsi yang ingin dijalankan: Ini adalah fungsi yang akan dieksekusi setelah jeda waktu tertentu.
2. Jeda waktu (dalam milidetik): Ini adalah waktu dalam milidetik yang akan ditunda sebelum fungsi dijalankan.

Contoh:

function showMessage() {
  alert("Pesan ini ditampilkan setelah 5 detik!");
}

setTimeout(showMessage, 5000); // Menjalankan showMessage() setelah 5 detik (5000 milidetik)

Kode di atas akan menunda eksekusi fungsi showMessage() selama 5 detik. Setelah 5 detik, fungsi showMessage() akan dijalankan dan menampilkan pesan "Pesan ini ditampilkan setelah 5 detik!" dalam kotak dialog alert.

Contoh Lainnya

Berikut adalah contoh lain penggunaan setTimeout():

// Menampilkan teks "Loading..." selama 3 detik
document.getElementById("loading-text").textContent = "Loading...";

// Menampilkan teks "Selesai" setelah 3 detik
setTimeout(function() {
  document.getElementById("loading-text").textContent = "Selesai";
}, 3000);

Kode di atas akan:

1. Menampilkan teks "Loading..." pada elemen dengan ID "loading-text".
2. Setelah 3 detik, akan mengganti teks "Loading..." menjadi "Selesai".

Mengapa Menggunakan setTimeout()?

setTimeout() memberikan kontrol yang lebih baik atas eksekusi kode JavaScript. Anda dapat menunda eksekusi kode tertentu untuk mencapai tujuan tertentu, seperti yang dijelaskan di atas.

Catatan

• Waktu yang ditentukan dalam setTimeout() adalah perkiraan. Browser mungkin tidak dapat menjalankan fungsi tepat pada waktu yang ditentukan, terutama jika browser sedang sibuk dengan tugas lain.
• Jika Anda ingin menunda eksekusi kode secara berulang, gunakan fungsi setInterval().

Dengan memahami cara menggunakan setTimeout(), Anda dapat membuat aplikasi web yang lebih interaktif dan efisien.