Timing Even merupakan sebuah jendela object yang memungkinkan kita untuk mengesekusi atau menjalankan perintah tertentu sesuai dengan waktu yang di tentukan. Cara Penggunaan Timing Event Pada JavaScript terdapat dua cara diantaranya yaitu, setTimeout() dan clearTimeout().

  • setTimeout() merupakan sebuah method yang berfungsi untuk mengesekusi sebuah kode beberapa waktu tertentu untuk struktur penulisannya yaitu seperti di bawah ini

var time = setTimeout("javascript statement", milli seconds);

ket :

setTimeout merupakan sebuah method yang berfungsi untuk mengembalikan nilai, dan nilai tersebut disimpan dalam variable time, sedangkan parameter kedia merupakan berapa banyak atau berapa lama waktu yang diperlukan untuk mengesekusi script yang terdapat pada parameter pertama, dan yang harus kita ketahui bahwa 1000 milidetik sama dengan 1 (satu) detik.

Untuk contoh penggunaan dari setTimeout() yaitu seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Cara Penggunaan Timing Event Pada JavaScript</title>
</head>
<body>
	<form>
		<input type="button" value="jika diklik maka akan muncul alert selama 5 detik" onclick="waktuPesan()" />
	</form>
	
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%09%09function%20waktuPesan()%0A%09%09%7B%0A%09%09%09var%20time%3DsetTimeout(%22alertMsg()%22%2C5000)%3B%0A%09%09%7D%0A%09%09%09function%20alertMsg()%0A%09%09%7B%0A%09%09%09alert(%22Hello%20Dumet%20School%22)%3B%0A%09%09%7D%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>

Jika kita jalankan maka akan terlihat hasilnya seperti dibawah ini :

Cara Penggunaan Timing Event Pada JavaScript

Demo

  • ClearTimeout() merupakan kebalikan dari setTimeout(), clearTimeout() berfungsi untuk mengcancel perintah dari setTimeout() jadi pada saat waktu yang telah ditentukan belum terpenuhi maka kita dapat mengcencel proses yang terdapat di dalam setTimeout().

Untuk struktur penulisan dari clearTimeout() yaitu seperti dibawah ini :

clearTimeout(timeoutId);

ket : timeOutId merupakan return dari setTimeout() untuk contoh penggunaannya yaitu seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Cara Penggunaan Timing Event Pada JavaScript</title>
</head>
<body>

<input type="button" id="btn-check" value="timeout" onclick="alertCheck()"/>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20alertCheck()%7B%0A%09if(%24('%23btn-check').val()%20%3D%3D%20'timeout')%7B%0A%09%09%24('%23btn-check').val('stop%20cek')%3B%0A%09%09alertTimeId%20%3D%20setTimeout('tampilAlert()'%2C5000)%3B%2F%2F%20timeoutId%0A%09%09%7Delse%7B%0A%09%09%24('%23btn-check').val('timeout')%3B%0A%09%09clearTimeout(alertTimeId)%3B%2F%2F%20timeoutId%0A%09%7D%0A%7D%0A%0Afunction%20tampilAlert()%7B%0A%09alert('Anda%20Terlambat%20Click%20Stop')%3B%0A%09%24('%23btn-check').val('timeout')%3B%0A%7D%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>

Jika kita jalankaan maka akan terlihat hasilnya seperti dibawah ini :

Cara Penggunaan Timing Event Pada JavaScript

Demo

Oke teman-teman itulah pembahasan kita tetang Cara Penggunaan Timing Event Pada JavaScript.

Semoga bermanfaat.

Terima kasih.