Mulai dan hentikan timer dalam javascript

Javascript Penghitung waktu mulai berhenti sederhana, Klik pada "Mulai menghitung. " tombol di atas untuk memulai pengatur waktu. Kolom input akan dihitung selamanya, mulai dari 0. Klik pada "Berhenti menghitung. tombol " untuk menghentikan penghitungan. Klik pada "Mulai menghitung. " tombol untuk memulai timer lagi

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 dijalankan 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 menampilkan waktu yang diperbarui

Bagaimana cara membuat pengatur waktu dan memulainya di JavaScript?

Bagaimana cara menghentikan penghitung waktu dengan JavaScript?

Bagaimana cara mengatur timer di JavaScript?

Bagaimana Anda memulai dan menghentikan timer?