Apa delay() dalam javascript?

Konten dinamis, atau konten yang berubah saat pengguna berinteraksi dengan halaman web, merupakan bagian integral dari pengalaman web modern. Javascript memberi pengguna web pengalaman web yang lebih menarik dengan membuatnya mudah untuk membuat konten dinamis

Aspek kunci dalam membuat konten dinamis adalah memastikan bahwa perubahan bagian halaman web terjadi pada waktu yang tepat. Ketika efek Javascript dinamis terjadi pada waktu yang salah, bagian halaman web dapat menjadi tidak dapat diakses, terlalu banyak konten dapat memenuhi layar sekaligus, dan pengguna dapat mengalami masalah lain

Standar Javascript menyediakan dua fungsi berbeda untuk mengontrol pengaturan waktu dinamis. setTimeout() dan setInterval(). Setiap fungsi menentukan waktu tertentu di mana peristiwa dinamis harus terjadi;

Pentingnya Timer Javascript

Javascript "timer" dan Javascript "wait functions" adalah dua nama umum untuk hal yang sama. Fungsi Javascript yang menjeda eksekusi program. Jeda jarang diperlukan untuk kalkulasi yang tidak pernah dilihat pengguna, tetapi sering kali sangat penting untuk memberi pengguna pengalaman yang lancar di halaman web

Misalnya, jika Anda berada di situs web yang berisi flipbook bergambar, penghitung waktu adalah cara kerja flipbook tersebut. Tanpa penghitung waktu, dua gambar hanya akan berubah dari satu ke yang lain dengan segera tanpa ada animasi di antara keduanya. Setiap perubahan yang Anda lihat di hasil animasi dari pengatur waktu Javascript

Semua pengatur waktu Javascript bekerja pada blok waktu kecil dan besar. Interval waktu yang kecil menghasilkan animasi yang halus, mirip dengan bingkai dalam film yang muncul dengan cepat, satu demi satu. Interval waktu yang lama memberi pengguna waktu untuk mencerna informasi sebelum beralih ke hal lain, seperti membaca halaman buku sebelum halaman berikutnya dimuat

Timer Javascript adalah tambahan yang relatif modern untuk Javascript, sehingga tidak berfungsi di banyak browser lama, seperti Internet Explorer 9 dan yang lebih lama. Fungsi yang lebih panjang yang memperkirakan waktu, disebut polyfill, tersedia di seluruh web, tetapi persentase pengguna web yang menggunakan browser lama tanpa fungsi ini sangat kecil (saat ini kurang dari 2%)

Polyfill paling komprehensif yang mengkompensasi banyak browser lama adalah 50 baris kode atau lebih; . Untuk kesempatan yang semakin jarang Anda memerlukan polyfill untuk salah satu fungsi pengatur waktu Javascript, ada banyak contoh yang dapat diandalkan di GitHub, dalam tutorial kode, dan ditawarkan oleh pengembang swasta

Fungsi setTimeout()

Fungsi setTimeout() mengimplementasikan penundaan sebelum menjalankan fungsi Javascript tertentu. Itu membutuhkan dua parameter. fungsi pasca-penundaan yang akan dijalankan dan waktu tunda

Fungsi pasca-penundaan harus ditentukan dalam file Javascript sebelum dipanggil oleh setTimeout(). Waktu tunda adalah bilangan bulat (bilangan bulat), ditentukan dalam milidetik (1/1000 detik

// After a delay, say "Hi!"
function delayedFunction() {
    console.log("Hi!");
}

// Run delayedFunction() after a 2000 millisecond (2 second) delay
let timer = setTimeout(delayedFunction, 2000);

Fungsi pasca-penundaan mungkin memerlukan parameter juga. Lewati parameter ke fungsi dengan menambahkannya ke pemanggilan setTimeout(). Dua parameter pertama diteruskan ke setTimeout() dikonsumsi dan parameter tambahan, yang dapat berupa jenis Javascript yang valid, diteruskan

// After delay, say a personalized "Hi"
function delayedFunction(a, b) {
    console.log("Hi " + a + " " + b + "!");
}

// Run delayedFunction() after a 2000 millisecond (2 second) delay
let timer = setTimeout(delayedFunction, 2000, "John", "Doe");

Fungsi setTimeout() mengembalikan ID internal dari fungsi pasca-penundaan, berguna saat penundaan harus dipersingkat oleh

// After delay, say a personalized "Hi"
function delayedFunction(a, b) {
    console.log("Hi " + a + " " + b + "!");
}

// Run delayedFunction() after a 2000 millisecond (2 second) delay
let timer = setTimeout(delayedFunction, 2000, "John", "Doe");

clearTimeout(timer); // stop the delay set previously

Fungsi setInterval()

Fungsi setInterval(), seperti setTimeout(), mengimplementasikan penundaan sebelum menjalankan fungsi pasca-penundaan. Sementara fungsi setTimeout() mengeksekusi fungsi pasca-penundaannya tepat satu kali, setInterval() terus memanggil fungsinya pada interval hingga dihentikan secara eksplisit

setInterval(), seperti setTimeout(), memerlukan dua parameter. fungsi pasca-penundaan dan waktu tunda. Parameter selanjutnya diteruskan ke fungsi pasca-penundaan

Perhatikan fungsi mana yang Anda pilih, dan tetap konsisten. Jangan bingung setInterval() dan setTimeout(), atau

clearTimeout(timer); // stop the delay set previously

// After delay, say a personalized "Hi"
function delayedFunction(a, b) {
    console.log("Hi " + a + " " + b + "!");
}

// Run delayedFunction() after a 2000 millisecond (2 second) delay
let timer = setTimeout(delayedFunction, 2000, "John", "Doe");

// After delay, a personalized "Hi"
function delayedFunction(a, b) {
    console.log("Hi " + a + " " + b + "!");
}

// Continuously run delayedFunction every 2000 milliseconds
let timer = setInterval(delayedFunction, 2000, "John", "Doe");

// (sometime later in the code)
// Stop the previously set timer from being called
clearInterval(timer);

Kesimpulan

Lebih canggih dari Javascript dasar, fungsi pengaturan waktu Javascript memberi pengembang kontrol yang terlihat atas pengalaman web pengguna.  

Gunakan setTimeout() untuk menjalankan fungsi setelah penundaan tunggal, dan batalkan penundaan itu kapan saja dengan

// After delay, say a personalized "Hi"
function delayedFunction(a, b) {
    console.log("Hi " + a + " " + b + "!");
}

// Run delayedFunction() after a 2000 millisecond (2 second) delay
let timer = setTimeout(delayedFunction, 2000, "John", "Doe");

clearTimeout(timer); // stop the delay set previously

Bagaimana cara menggunakan penundaan dalam JavaScript?

Apa gunanya metode penundaan?

Bagaimana cara menunda 1 detik dalam JavaScript?

Bagaimana cara memanggil fungsi setelah 2 detik JavaScript?