Event Waktu JavaScript

JavaScript dapat dijalankan dalam jangka waktu.

Ini disebut dengan peristiwa waktu (Timing Events).

Peristiwa Timing

Objek window memungkinkan untuk menjalankan kode dengan jeda waktu yang ditentukan.

Waktu interval ini disebut peristiwa timing.

dua metode kunci yang digunakan dalam JavaScript:

setTimeout(function, milisecond)
melakukan fungsi setelah menunggu milisecond yang ditentukan.
setInterval(function, milisecond)
setara dengan setTimeout(), tetapi terus mengulangi eksekusi fungsi ini.

setTimeout() dan Method setInterval() semua termasuk metode dalam objek HTML DOM Window.

Metode setTimeout()

window.setTimeout(function, milisecond);

window.setTimeout() metode dapat tanpa window dengan prefiks.

Parameter pertama adalah fungsi yang akan dieksekusi.

Parameter kedua menunjukkan milisecond sebelum eksekusi.

Contoh

Klik tombol. Tunggu 3 detik, lalu halaman akan menampilkan "Hello":

<button onclick="setTimeout(myFunction, 3000)">Coba</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

Coba Sendiri

Bagaimana menghentikan eksekusi?

clearTimeout() metode berhenti eksekusi setTimeout() fungsi yang ditentukan dalam aturan.

window.clearTimeout(timeoutVariable)

window.clearTimeout() metode dapat tanpa window dengan prefiks.

clearTimeout() dengan menggunakan setTimeout() Variabel yang kembalikan:

myVar = setTimeout(function, milisecond);
clearTimeout(myVar);

Contoh

Seperti di contoh sebelumnya, tetapi menambahkan tombol "Berhenti":

<button onclick="myVar = setTimeout(myFunction, 3000)">Coba</button>
<button onclick="clearTimeout(myVar)">Berhenti Eksekusi</button>

Coba Sendiri

Metode setInterval()

Method setInterval() metode mengulangi fungsi yang diberikan setiap jeda waktu yang diberikan.

window.setInterval(function, milisecond);

window.setInterval() metode dapat tanpa window dengan prefiks.

Parameter pertama adalah fungsi yang akan dieksekusi.

Parameter kedua adalah panjang jarak waktu antara setiap eksekusi.

Dalam contoh ini, fungsi "myTimer" dijalankan sekali setiap detik (seperti jam digital).

Contoh

Tampilkan waktu saat ini:

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Coba Sendiri

Satu detik memiliki 1000 milisecond.

Bagaimana menghentikan eksekusi?

Method clearInterval() metode berhenti Method setInterval() melakukan eksekusi fungsi yang ditentukan dalam metode.

window.clearInterval(timerVariable)

window.clearInterval() dapat ditulis tanpa awalan window.

Method clearInterval() Method setInterval() digunakan dari Method setInterval() Variabel yang kembalikan:

myVar = setInterval(function, milisecond);
clearInterval(myVar);

Contoh

Sebagai contoh seperti yang sebelumnya, tetapi kita menambahkan tombol "Berhenti Waktu":

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Berhenti Waktu</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Coba Sendiri

Beberapa Contoh Lainnya

Waktu yang sederhana lainnya
Jam dibuat oleh Waktu Waktu