Tutorial JavaScript Timing Events

JavaScript Waktu Acara

Dengan JavaScript, adalah mungkin untuk mengeksekusi beberapa kode setelah interval waktu yang ditentukan. Peristiwa ini disebut waktu.

Ini sangat mudah untuk kejadian waktu dalam JavaScript. Dua metode kunci yang digunakan adalah:

  • setTimeout () – mengeksekusi sebuah kode beberapa waktu di masa depan
  • ¬†clearTimeout () – membatalkan setTimeout ()

Catatan: setTimeout () dan clearTimeout () adalah kedua metode dari objek HTML DOM Jendela.

SetTimeout () Metode

Syntax

var t=setTimeout(“javascript statement“,milliseconds);

Timeout set () method mengembalikan nilai. Dalam sintaks yang didefinisikan di atas, nilai tersebut disimpan dalam variabel yang disebut t. Jika Anda ingin membatalkan setTimeout () fungsi, Anda dapat merujuk ke menggunakan nama variabel.

  • Parameter pertama dari setTimeout () dapat berupa string dari kode dieksekusi, atau panggilan ke fungsi.
  • Parameter kedua menunjukkan berapa banyak milidetik dari sekarang Anda ingin mengeksekusi parameter pertama.

Catatan: Ada 1000 milidetik dalam satu detik

contoh :
Ketika tombol diklik pada contoh di bawah, sebuah alert box akan ditampilkan setelah 3 detik.

<html>
<head>
<script type=”text/javascript”>
function timeMsg()
{
var t=setTimeout(“alertMsg()”,3000);
}
function alertMsg()
{
alert(“Hello”);
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Display alert box in 3 seconds”
onclick=”timeMsg()” />
</form>
</body>
</html>

Contoh – Infinite Loop
Untuk mendapatkan timer untuk bekerja dalam infinite loop, kita harus menulis sebuah fungsi yang memanggil dirinya sendiri.
Pada contoh di bawah, ketika sebuah tombol diklik, field input akan mulai menghitung (selamanya), mulai dari 0.

Perhatikan bahwa kita juga memiliki fungsi yang memeriksa apakah timer sudah berjalan, untuk menghindari menciptakan timer tambahan, jika tombol ditekan lebih dari sekali:

<html>
<head>
<script type=”text/javascript”>
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById(‘txt’).value=c;
c=c+1;
t=setTimeout(“timedCount()”,1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Start count!” onclick=”doTimer()”>
<input type=”text” id=”txt” />
</form>
</body>
</html>

ClearTimeout() Method

Syntax

clearTimeout(setTimeout_variable)

Contoh :
Contoh di bawah adalah sama seperti contoh “Infinite Loop” di atas. Satu-satunya perbedaan adalah bahwa kita memiliki sekarang menambahkan “Count Hentikan!” tombol yang menghentikan timer:

<html>
<head>
<script type=”text/javascript”>
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById(‘txt’).value=c;
c=c+1;
t=setTimeout(“timedCount()”,1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}

function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>

<body>
<form>
<input type=”button” value=”Start count!” onclick=”doTimer()”>
<input type=”text” id=”txt”>
<input type=”button” value=”Stop count!” onclick=”stopCount()”>
</form>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *