Sekarang mari kita buat dua tombol. dengan mengklik yang pertama, biarkan pengatur waktu mulai, dan dengan mengklik yang kedua, itu akan berhenti. Di sini semuanya tidak akan sesederhana itu dan jebakan menanti kita. Untuk memahami inti dari trik ini, saya akan menjelaskan pembuatan kode secara bertahap
Jadi, kami membuat dua tombol
start stop
Kami mendapatkan referensi ke tombol-tombol ini ke dalam variabel
let start = document.querySelector('#start'); let stop = document.querySelector('#stop');_
Dengan menekan tombol pertama, kita memulai pengatur waktu dengan menuliskan nomornya ke sebuah variabel
start.addEventListener('click', function() { let i = 0; let timerId = setInterval(function() { console.log('!') }, 1000); });
Dan sekarang kita akan menghentikan timer dengan menekan tombol kedua
start.addEventListener('click', function() { let i = 0; let timerId = setInterval(function() { console.log('!') }, 1000); }); // Stopping the timer: stop.addEventListener('click', function() { clearInterval(timerId); });
Namun, jika kami mencoba menjalankan kode di atas, kami akan terkejut. ketika kami mencoba menghentikan pengatur waktu, kami menemukan bahwa variabel timerId sama dengan undefined. Kenapa ini terjadi?
Untuk mengatasi masalah ini, mari kita jadikan variabel timerId global - dalam hal ini, ini akan tersedia baik di fungsi mulai pengatur waktu maupun di fungsi berhenti
let timerId; // makes the variable global start.addEventListener('click', function() { let i = 0; timerId = setInterval(function() { console.log('!') }, 1000); }); stop.addEventListener('click', function() { clearInterval(timerId); });_
Biarkan variabel diberikan yang awalnya menyimpan nomor let start = document.querySelector('#start'); let stop = document.querySelector('#stop');0. Ada juga dua tombol. Dengan menekan tombol pertama, mulai penghitung waktu, yang setiap detik akan mengurangi nilai variabel sebesar let start = document.querySelector('#start'); let stop = document.querySelector('#stop');1 dan menampilkan nilai baru ke konsol. Segera setelah nilai variabel mencapai nol, hentikan timer
Hentikan timer dengan menekan tombol kedua. Hentikan juga pengatur waktu jika tombol kedua tidak ditekan, tetapi nilai variabel mencapai nol
Beberapa pemrogram menulis kode yang, ketika sebuah tombol ditekan, memulai pengatur waktu yang mencetak waktu saat ini ke konsol
let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');3
Namun setelah menjalankan kode, ternyata tombol stop tidak berfungsi. Harap perbaiki kesalahan pembuat kode
Pemrogram lain juga menulis kode untuk menyelesaikan masalah sebelumnya
let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');5
Namun setelah menjalankan kode, lagi-lagi ternyata tombol stop tidak berfungsi. Perbaiki kesalahan pembuat kode
Pemrogram lain juga menulis kode untuk menyelesaikan masalah sebelumnya
let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');7
Namun setelah menjalankan kode, lagi-lagi ternyata tombol stop tidak berfungsi. Perbaiki kesalahan pembuat kode
Pemrogram lain juga menulis kode untuk menyelesaikan masalah sebelumnya
let start = document.querySelector('#start'); let stop = document.querySelector('#stop');2 let start = document.querySelector('#start'); let stop = document.querySelector('#stop');9
Namun setelah menjalankan kode, lagi-lagi ternyata tombol stop tidak berfungsi. Perbaiki kesalahan pembuat kode
Kode yang saya berikan di bagian teoretis tidak memperhitungkan fakta bahwa beberapa klik dapat dilakukan pada tombol mulai. Untuk memperbaiki masalah ini, Anda dapat melepaskan ikatan acara dari tombol ini dengan menekan tombol mulai, dan mengikatnya kembali dengan menekan tombol berhenti. Perbaiki masalahnya
Dalam JavaScript, pengatur waktu dibuat untuk menjalankan tugas atau fungsi apa pun pada waktu tertentu. Pada dasarnya timer digunakan untuk menunda eksekusi program atau mengeksekusi kode JavaScript dalam interval waktu yang teratur. Dengan bantuan pengatur waktu, kita dapat menunda eksekusi kode. Jadi, kode tidak menyelesaikan eksekusinya pada saat yang sama ketika suatu peristiwa memicu atau memuat halaman
Contoh terbaik pengatur waktu adalah spanduk iklan di situs web, yang berubah setiap 2-3 detik. Spanduk iklan ini diubah secara berkala di situs web seperti Amazon. Kami menetapkan interval waktu untuk mengubahnya. Dalam bab ini, kami akan menunjukkan cara membuat timer
JavaScript menawarkan dua fungsi pengatur waktu setInterval() dan setTimeout(), yang membantu menunda eksekusi kode dan juga memungkinkan untuk melakukan satu atau lebih operasi berulang kali. Kami akan membahas fungsi pengatur waktu secara rinci serta contohnya
Contoh
Di bawah ini adalah beberapa contoh pengatur waktu JavaScript menggunakan fungsi-fungsi ini
setTimeout()
Fungsi setTimeout() membantu pengguna untuk menunda eksekusi kode. Metode setTimeout() menerima dua parameter di mana satu adalah fungsi yang ditentukan pengguna, dan yang lainnya adalah parameter waktu untuk menunda eksekusi. Parameter waktu menyimpan waktu dalam milidetik (1 detik = 1000 milidetik), yang opsional untuk dilewati
Sintaks dasar setTimeout() adalah
Kami akan menggunakan fungsi setTimeout() untuk menunda pencetakan pesan selama 3 detik. Pesan akan ditampilkan di web setelah 3 detik eksekusi kode, bukan segera. Sekarang, mari kita lihat kode di bawah ini untuk melihat cara kerjanya
Eksekusi kode setelah penundaan
Uji SekarangKeluaran
Kode di atas akan dijalankan dalam dua bagian. Pertama, bagian HTML dari kode akan dijalankan, di mana dengan mengklik tombol Klik Di Sini, kode JavaScript yang tersisa akan dijalankan setelah 3 detik. Lihat output di bawah ini
Saat mengklik tombol Klik Di Sini, kode yang tersisa akan dieksekusi setelah 3 detik. Pesan Selamat datang di javaTpoint akan ditampilkan di web setelah 3 detik (3000 milidetik)
setInterval()
Metode setInterval sedikit mirip dengan fungsi setTimeout(). Itu mengeksekusi fungsi yang ditentukan berulang kali setelah interval waktu. Atau kita dapat dengan mudah mengatakan bahwa suatu fungsi dijalankan berulang kali setelah waktu tertentu yang disediakan oleh pengguna dalam fungsi ini. Misalnya - Menampilkan waktu yang diperbarui setiap lima detik
Sintaks dasar setInterval() adalah
Mirip dengan metode setTimeout(), ia juga menerima dua parameter di mana satu adalah fungsi yang ditentukan pengguna, dan yang lainnya adalah parameter interval waktu untuk menunggu sebelum menjalankan fungsi. Parameter interval waktu menyimpan jumlah waktu dalam milidetik (1 detik = 1000 milidetik), yang opsional untuk dilewati. Sekarang, lihat kode di bawah ini bagaimana fungsi ini bekerja
Eksekusi kode secara berkala
Uji SekarangKeluaran
Saat mengeksekusi kode di atas, responsnya akan menjadi pernyataan HTML sederhana tanpa string waktu seperti output di bawah ini
Setelah 4 detik, fungsi JavaScript akan memanggil dan mulai menampilkan waktu. Ini akan berulang kali menampilkan waktu sistem Anda setiap empat detik
Contoh
Satu lagi contoh metode setInterval() untuk menampilkan string pesan setelah setiap 4 detik terus menerus
Uji SekarangKeluaran
Saat mengeksekusi kode di atas, pesan dengan tombol akan ditampilkan di browser. Klik tombol ini untuk memproses lebih lanjut dan lihat apa yang terjadi selanjutnya
Dengan mengklik tombol Click Here ini, waitAndshow() akan mulai mencetak pesan Welcome to Javatpoint berulang kali di web setiap 4 detik
Anda telah melihat cara membuat timer atau mengatur interval waktu. Terkadang, kami perlu membatalkan penghitung waktu ini. JavaScript menawarkan fungsi bawaan untuk menghapus penghitung waktu, yaitu sebagai berikut
Batalkan atau Hentikan penghitung waktu
JavaScript menawarkan dua fungsi clearTimeout() dan clearInterval() untuk membatalkan atau menghentikan timer dan menghentikan eksekusi kode. setTimeout() dan setInterval() keduanya mengembalikan ID unik. ID ini digunakan oleh clearTimeout() dan clearInterval() untuk menghapus timer dan menghentikan eksekusi kode sebelumnya. Keduanya hanya mengambil satu parameter, yaitu. e. , PENGENAL
Contoh
Dalam contoh ini, kita akan menggunakan clearTimeout() untuk menghapus timer yang disetel dengan fungsi setTimeout(). Lihat contoh bagaimana clearInterval() bekerja dengan setInterval()
Nonaktifkan interval reguler
Uji SekarangKeluaran
Dengan menjalankan kode di atas, waktu sistem saat ini akan mulai ditampilkan di web dengan interval reguler 3 detik. Halaman ini juga memiliki tombol untuk menonaktifkan pengatur waktu ini
Timer akan menunjukkan waktu yang diperbarui setelah setiap tiga detik. Jika Anda mengklik tombol Hentikan Jam ini, pengatur waktu akan dinonaktifkan dan berhenti menunjukkan waktu yang diperbarui