Acara Pengaturan Waktu JavaScript
|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript dapat dieksekusi dalam interval waktu. Ini disebut peristiwa waktu. |
Waktu Acara
Objek windowmemungkinkan eksekusi kode pada interval waktu tertentu.
Interval waktu ini disebut peristiwa waktu.
Dua metode utama untuk digunakan dengan JavaScript adalah:
setTimeout(function, milliseconds)
Mengeksekusi suatu fungsi, setelah menunggu sejumlah milidetik yang ditentukan.setInterval(function, milliseconds)
Sama seperti setTimeout(), tetapi mengulangi eksekusi fungsi secara terus menerus.
Dan setTimeout()keduanya setInterval()adalah metode objek Jendela DOM HTML.
Metode setTimeout()
window.setTimeout(function, milliseconds);
Metode window.setTimeout()ini dapat ditulis tanpa awalan jendela.
Parameter pertama adalah fungsi yang akan dieksekusi.
Parameter kedua menunjukkan jumlah milidetik sebelum eksekusi.
Contoh
Klik sebuah tombol. Tunggu 3 detik, dan halaman akan mengingatkan "Halo":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Bagaimana Menghentikan Eksekusi?
Metode clearTimeout()menghentikan eksekusi fungsi yang ditentukan dalam setTimeout().
window.clearTimeout(timeoutVariable)
Metode window.clearTimeout()ini dapat ditulis tanpa awalan jendela.
Metode clearTimeout()ini menggunakan variabel yang dikembalikan dari setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Jika fungsi belum dieksekusi, Anda dapat menghentikan eksekusi dengan memanggil clearTimeout()
metode:
Contoh
Contoh yang sama seperti di atas, tetapi dengan tombol "Stop" yang ditambahkan:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Metode setInterval()
Metode setInterval()ini mengulangi fungsi yang diberikan pada setiap interval waktu tertentu.
window.setInterval(function, milliseconds);
Metode window.setInterval()ini dapat ditulis tanpa awalan jendela.
Parameter pertama adalah fungsi yang akan dieksekusi.
Parameter kedua menunjukkan panjang interval waktu antara setiap eksekusi.
Contoh ini menjalankan fungsi yang disebut "myTimer" sekali setiap detik (seperti jam tangan digital).
Contoh
Menampilkan waktu saat ini:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Ada 1000 milidetik dalam satu detik.
Bagaimana Menghentikan Eksekusi?
Metode clearInterval()ini menghentikan eksekusi fungsi yang ditentukan dalam metode setInterval().
window.clearInterval(timerVariable)
Metode window.clearInterval()ini dapat ditulis tanpa awalan jendela.
Metode clearInterval()ini menggunakan variabel yang dikembalikan dari setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Contoh
Contoh yang sama seperti di atas, tetapi kami telah menambahkan tombol "Hentikan waktu":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>