Home » Javascript » Event Timing JavaScript: Cara Membuat dan Codenya

Event Timing JavaScript: Cara Membuat dan Codenya

by Catur Kurnia Sari
by Catur Kurnia Sari

JavaScript dapat dijalankan dalam interval waktu.

Hak ini disebut event timing (waktu).

Event Timing

Objek window memungkinkan eksekusi kode pada interval waktu yang ditentukan.

Interval waktu ini disebut event waktu.

Dua metode utama yang digunakan dengan JavaScript adalah:

  • setTimeout (fungsi, milidetik)

Menjalankan fungsi, setelah menunggu beberapa milidetik.

  • setInterval (fungsi, milidetik)

Sama seperti setTimeout(), tetapi mengulangi eksekusi fungsi secara terus menerus.
SetTimeout() dan setInterval() adalah kedua metode dari objek window DOM HTML.

Metode setTimeout()

window.setTimeout(function, milliseconds);

Metode window.setTimeout () bisa ditulis tanpa awalan window.

Parameter pertama adalah fungsi yang akan dijalankan.

Parameter kedua menunjukkan jumlah milidetik sebelum eksekusi.

Contoh:
Klik sebuah tombol. Tunggu 3 detik, dan halaman akan mengingatkan “Halo”.

<!DOCTYPE html>
<html>
<body>

<p>Klik sebuah tombol. Tunggu 3 detik, dan halaman akan mengingatkan "Halo".</p>

<button onclick="setTimeout(myFunction, 3000);">Cobalah</button>

<script>
function myFunction() {
  alert('Halo');
}
</script>

</body>
</html>

Bagaimana Cara Menghentikan Eksekusi?

Metode clearTimeout() menghentikan eksekusi fungsi yang ditentukan dalam setTimeout().

window.clearTimeout(timeoutVariable)

Metode window.clearTimeout() bisa ditulis tanpa awalan window.

Metode clearTimeout() menggunakan variabel yang dikembalikan dari setTimeout().

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

Jika fungsi belum dijalankan, Anda bisa menghentikan eksekusi dengan memanggil metode clearTimeout().

Contoh:
Contoh yang sama seperti di atas, tetapi dengan tambahan tombol “Stop”.

<!DOCTYPE html>
<html>
<body>

<p> Klik "Coba". Tunggu 3 detik. Halaman ini akan mengingatkan "Halo". </p>
<p> Klik "Berhenti" untuk mencegah fungsi pertama dijalankan. </p>
<p> (Anda harus mengklik "Berhenti" sebelum 3 detik habis.) </p>

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

<button onclick="clearTimeout(myVar)">Stop</button>

<script>
function myFunction() {
  alert("Halo");
}
</script>
</body>
</html>

Metode setInterval()

Metode setInterval() mengulangi fungsi yang diberikan pada setiap interval waktu tertentu.

window.setInterval(function, milliseconds);

Metode window.setInterval () bisa ditulis tanpa awalan window.

Parameter pertama adalah fungsi yang akan dijalankan.

Parameter kedua menunjukkan lamanya interval waktu antara setiap eksekusi.

Contoh ini menjalankan fungsi yang disebut “myTimer” setiap detik sekali (seperti jam tangan digital).

Contoh:
Tampilkan waktu saat ini.

<!DOCTYPE html>
<html>
<body>

<p>Skrip pada halaman memulai jam ini</p>
<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

Ada 1000 milidetik dalam satu detik.

Bagaimana Cara Menghentikan Eksekusi?

Metode clearInterval() menghentikan eksekusi fungsi yang ditentukan dalam metode setInterval().

window.clearInterval(timerVariable)

Metode window.clearInterval() bisa ditulis tanpa awalan window.

Metode clearInterval() menggunakan variabel yang dikembalikan dari setInterval():

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

Contoh:
Contoh yang sama seperti di atas, tetapi menambahkan tombol “Hentikan waktu”.

<!DOCTYPE html>
<html>
<body>

<p>Skrip pada halaman memulai jam ini</p>

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Hentikan Waktu</button>

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

</body>
</html>

You may also like