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"];
1clearTimeout[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
0 dan // 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"];
1// 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"];
1. Gunakan setInterval[]
_ untuk menjalankan fungsi berkali-kali dengan penundaan sebelum setiap eksekusi, dan batalkan eksekusi berulang tersebut dengan clearTimeout[timer]; // stop the delay set previously
0