Mengenal Set Time out dan Set Interval pada Javascript

 


Hallo Teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas mengenai salah satu function pada javascript yakni setInterval() dan setTimeOut() ,

nahh penggunaan function ini biasanya sering kita dapatkan pada notifikasi di suatu aplikasi berbasis website, yang dimana difungsikan untuk mengambil sebuah data di dalam database dalam interval waktu tertentu, dan selain digunakan untuk pembuatan notifikasi, penggunaan function ini juga bisa kita dapatkan dalam pembuatan sebuah game atau slider di halaman web.

nahh tanpa berlama-lama langsung saja kita masuk ke dalam materi dan prakteknya sebagai berikut :

A. Pengertian

1. Pengertian setInterval()

setInterval digunakan untuk memanggil suatu fungsi tiap beberapa milidetik, setInterval akan mengulang satu atau sekumpulan statement dalam script terus menerus selama halaman web dibuka 

Contoh Script 

setInterval ( Param 1, Param II);

Keterangan :

Param 1 => Isikan dengan function yang akan di jalankan 

Param II => Isikan dengan Waktu pengulangan, waktu disini akan dihitung berdasarkan milidetik ( Cth: 1000 milidetik = 1 detik )


2. Pengertian Set Time Out 

selain setInterval, ada satu function lagi yang hampir sejenis, yaitu setTimeOut. fungsi dari setTimeOut ini hampir sama dengan setInterval yang membedakannya ialah, dimana setInterval akan mengulangi sebuah function dalam beberapa milidetik secara terus menerus, sedangkan setTimeOut ini akan memanggil sebuah function sebanyak satu kali setelah beberapa milidetik

Contoh Script 

setTimeout ( Param I, Param II )

Keterangan 

Param I => Isikan dan Function yang akan dijalankan

Param II => Isikan dengan waktu dalam Milidetik


B. Praktek Penggunaan 

Oke setelah kita mengetahui fungsi dari setTimeout dan setInterval maka selanjutnya kita akan langsung praktek penggunaannya, yang pertama yang akan kita lakukan ialah membuatkan sebuah file di dalam folder web server kita contoh htdocs ( Xampp) dan /var/www/html/ (LAMP)

untuk penamaan folder silahkan sesuaikan dengan keinginan teman-teman semuanya, dan disini saya membuatkan sebuah file dengan nama index.html, untuk mempercepat silahkan copyt source code dibawah ini 

index.html


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Time Out & Set Interval</title>
</head>

<body>

<h1 style="text-align: center;">BELAJAR SET TIME OUT DENGAN SET INTERVAL</h1>
<hr>



<script>

// contoh interval
setInterval(function () {
console.log("Contoh INterval");
}, 1000);



</script>

</body>

</html>




Jika anda sudah mencopy source code diatas maka, selanjutnya jalankan di web browser teman-teman semuanya, dan silahkan buka console dan lihat hasilnya, maka kalimat contoh interval akan diulangi secara terus menerus setiap 1000 milidetik atau 1 detik

nahh dan selanjutnya kita akan praktekkan untuk setTimeout copy source code dibawah ini 

index2.html


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Set Time Out & Set Interval</title>
</head>

<body>

<h1 style="text-align: center;">BELAJAR SET TIME OUT DENGAN SET INTERVAL</h1>
<hr>



<script>

// contoh Set Time out
setTimeout(function () {
console.log("contoh set time out");
}, 2000);



</script>

</body>

</html>



Nahh jika teman-teman sudah menjalankanya di web browser dan membuka console kembali maka hasil dari kalimat contoh set time out akan di proses 1x dalam waktu 2000 mili detik atau 2 detik


sekian dan terimakasih ........


0 Komentar