Dalam tutorial ini, Anda akan belajar tentang metode JavaScript setTimeout () dengan bantuan contoh.
The setTimeout()Metode mengeksekusi blok kode setelah waktu tertentu. Metode ini mengeksekusi kode hanya sekali.
Sintaks yang umum digunakan dari JavaScript setTimeout adalah:
setTimeout(function, milliseconds);
Parameternya adalah:
- function - fungsi yang berisi blok kode
- milidetik - waktu setelah fungsi dijalankan
The setTimeout()Metode mengembalikan sebuah intervalID , yang merupakan bilangan bulat positif.
Contoh 1: Tampilkan Teks Sekali Setelah 3 Detik
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) setTimeout(greet, 3000); console.log('This message is shown first');
Keluaran
Pesan ini ditampilkan pertama Halo dunia
Dalam program di atas, setTimeout()metode memanggil greet()fungsi setelah 3000 milidetik ( 3 detik).
Oleh karena itu, program hanya menampilkan teks Hello world sekali setelah 3 detik.
Catatan : setTimeout()Metode ini berguna ketika Anda ingin mengeksekusi satu blok setelah beberapa waktu. Misalnya, menampilkan pesan kepada pengguna setelah waktu yang ditentukan.
The setTimeout()Metode mengembalikan id interval. Sebagai contoh,
// program to display a text using setTimeout method function greet() ( console.log('Hello world'); ) let intervalId = setTimeout(greet, 3000); console.log('Id: ' + intervalId);
Keluaran
Id: 3 Halo dunia
Contoh 2: Tampilkan Waktu Setiap 3 Detik
// program to display time every 3 seconds function showTime() ( // return new date and time let dateTime= new Date(); // returns the current local time let time = dateTime.toLocaleTimeString(); console.log(time) // display the time after 3 seconds setTimeout(showTime, 3000); ) // calling the function showTime();
Keluaran
5:45:39 17:45:43 17:45:47 17:45:50…
Program di atas menampilkan waktu setiap 3 detik.
The setTimeout()metode panggilan fungsi hanya sekali setelah interval waktu (di sini 3 detik).
Namun, pada program di atas, karena fungsi memanggil dirinya sendiri, program menampilkan waktu setiap 3 detik.
Program ini berjalan tanpa batas waktu (hingga memori habis).
Catatan : Jika Anda perlu menjalankan fungsi beberapa kali, lebih baik gunakan setInterval()metode ini.
JavaScript clearTimeout ()
Seperti yang Anda lihat pada contoh di atas, program mengeksekusi blok kode setelah interval waktu yang ditentukan. Jika Anda ingin menghentikan panggilan fungsi ini, Anda dapat menggunakan clearTimeout()metode ini.
Sintaks clearTimeout()metode adalah:
clearTimeout(intervalID);
Di sini, intervalIDadalah nilai kembalian dari setTimeout()metode tersebut.
Contoh 3: Gunakan Metode clearTimeout ()
// program to stop the setTimeout() method let count = 0; // function creation function increaseCount()( // increasing the count by 1 count += 1; console.log(count) ) let id = setTimeout(increaseCount, 3000); // clearTimeout clearTimeout(id); console.log('setTimeout is stopped.');
Keluaran
setTimeout dihentikan.
Dalam program di atas, setTimeout()metode ini digunakan untuk meningkatkan nilai hitungan setelah 3 detik. Namun, clearTimeout()metode tersebut menghentikan panggilan fungsi dari setTimeout()metode tersebut. Makanya, nilai hitungannya tidak bertambah.
Catatan : Anda biasanya menggunakan clearTimeout()metode ini ketika Anda perlu membatalkan setTimeout()panggilan metode sebelum itu terjadi.
Anda juga bisa meneruskan argumen tambahan ke setTimeout()metode ini. Sintaksnya adalah:
setTimeout(function, milliseconds, parameter1,… .paramenterN);
Ketika Anda melewati parameter tambahan untuk setTimeout()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 setTimeout setTimeout(greet, 1000, 'John', 'Doe');
Keluaran
Halo John Doe
Dalam program di atas, dua parameter Johndan Doediteruskan ke setTimeout()metode. Kedua parameter ini adalah argumen yang akan diteruskan ke fungsi (di sini, greet()fungsi) yang ditentukan di dalam setTimeout()metode.
Bacaan yang Disarankan: JavaScript async () dan await ()
