Dalam tutorial ini, Anda akan belajar tentang metode JavaScript setInterval () dengan bantuan contoh.
Dalam JavaScript, satu blok kode dapat dieksekusi dalam interval waktu yang ditentukan. Interval waktu ini disebut kejadian waktu.
Ada dua metode untuk mengeksekusi kode pada interval tertentu. Mereka:
- setInterval ()
- setTimeout ()
Dalam tutorial ini, Anda akan belajar tentang setInterval()metode tersebut.
JavaScript setInterval ()
The setInterval()Metode mengulangi blok kode di setiap event waktu yang diberikan.
Sintaks yang umum digunakan dari JavaScript setInterval adalah:
setInterval(function, milliseconds);
Parameternya adalah:
- function - fungsi yang berisi blok kode
- milidetik - interval waktu antara eksekusi fungsi
The setInterval()Metode mengembalikan sebuah intervalID yang merupakan bilangan bulat positif.
Contoh 1: Menampilkan Teks Sekali Setiap 1 Detik
// program to display a text using setInterval method function greet() ( console.log('Hello world'); ) setInterval(greet, 1000);
Keluaran
Halo dunia Halo dunia Halo dunia Halo dunia Halo dunia….
Dalam program di atas, setInterval()metode memanggil greet()fungsi setiap 1000 milidetik ( 1 detik).
Karenanya program menampilkan teks Halo dunia setiap 1 detik.
Catatan : setInterval()Metode ini berguna saat Anda ingin mengulang satu blok kode beberapa kali. Misalnya, menampilkan pesan pada interval tetap.
Contoh 2: Tampilkan Waktu Setiap 5 Detik
// program to display time every 5 seconds function showTime() ( // return new date and time let dateTime= new Date(); // return the time let time = dateTime.toLocaleTimeString(); console.log(time) ) let display = setInterval(showTime, 5000);
Keluaran
"17:15:28" "17:15:33" "17:15:38"….
Program di atas menampilkan waktu saat ini setiap 5 detik.
new Date()memberikan tanggal dan waktu saat ini. Dan toLocaleTimeString()mengembalikan waktu saat ini. Untuk mempelajari lebih lanjut tentang tanggal dan waktu, kunjungi JavaScript Date and Time.
JavaScript clearInterval ()
Seperti yang Anda lihat pada contoh di atas, program mengeksekusi blok kode pada setiap interval waktu yang ditentukan. Jika Anda ingin menghentikan panggilan fungsi ini, Anda dapat menggunakan clearInterval()metode ini.
Sintaks clearInterval()metode adalah:
clearInterval(intervalID);
Di sini, intervalIDadalah nilai kembalian dari setInterval()metode tersebut.
Contoh 3: Gunakan Metode clearInterval ()
// program to stop the setInterval() method after five times let count = 0; // function creation let interval = setInterval(function()( // increasing the count by 1 count += 1; // when count equals to 5, stop the function if(count === 5)( clearInterval(interval); ) // display the current time let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); ), 2000);
Keluaran
16:47:41 16:47:43 16:47:45 16:47:47 16:47:49
Dalam program di atas, setInterval()metode ini digunakan untuk menampilkan waktu saat ini setiap 2 detik. The clearInterval()metode berhenti fungsi panggilan setelah 5 kali.
Anda juga bisa meneruskan argumen tambahan ke setInterval()metode ini. Sintaksnya adalah:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Ketika Anda melewati parameter tambahan untuk setInterval()metode, parameter ini ( parameter1, parameter2, dll) akan diteruskan ke yang ditentukan fungsi .
Sebagai contoh,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setInterval setInterval(greet, 1000, 'John', 'Doe');
Keluaran
Halo John Doe Halo John Doe Halo John Doe….
Dalam program di atas, dua parameter Johndan Doediteruskan ke setInterval()metode. Kedua parameter ini adalah argumen yang akan diteruskan ke fungsi (di sini, greet()fungsi) yang ditentukan di dalam setInterval()metode.
Catatan: Jika Anda hanya perlu menjalankan fungsi satu kali, lebih baik menggunakan metode setTimeout ().
