Cara memulai timer di javascript

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

Keluaran

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

Keluaran

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

Keluaran

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

Keluaran

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

Bagaimana cara memulai dan menghentikan timer di JavaScript?

Bagaimana cara membuat tombol memulai penghitung waktu di JavaScript?

Bagaimana cara mengatur penghitung waktu mundur di JavaScript?

Apakah ada pengatur waktu di JavaScript?