setInterval dan setTimeout ~ Pemrograman dan Teknologi

Ada dua function yang cukup penting dan akan berguna dalam pembuatan game dan tampilan animasi dengan javascript. Function tersebut adalah setInterval dan setTimeOut. Kedua function tersebut bisa digunakan untuk menentukan jeda waktu sebelum bagian tertentu dari script dieksekusi.

SetInterval

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

<HTML>
<HEAD>
</HEAD>
<BODY>
    <SCRIPT>
        var i=0;
            setInterval(function(){
            document.write(i+"<BR />");
            i++;
        }, 1000);
    </SCRIPT>
</BODY>
</HTML>

Function expression yang menjadi argumen pertama dalam setInterval akan dipanggil berulang-ulang sesuai waktu yang jadi parameter kedua dari setInterval. Contoh di atas akan memanggil function setInterval tiap 1000 milidetik yang sama dengan satu detik. function tersebut menampilkan dan mengubah nilai variabel i setiap dipanggil.

Jika ingin menghentikan setInterval, kita harus menggunakan clearInterval dengan syarat yang diletakkan dalam if atau switch.

<HTML>
<HEAD>
</HEAD>
<BODY>
    <SCRIPT>
        var i=0;
        var interval=setInterval(function(){
            document.write(i+"<BR />");
            if(i>9)clearInterval(interval);
            i++;
        }, 1000);
    </SCRIPT>
</BODY>
</HTML>

Pada contoh di atas, setInterval akan dihentikan dengan clearInterval setelah "i>=10". Karena nilai i terus bertambah, pada saat i lebih dari 9 tidak akan ada lagi yang ditampilkan, berbeda dengan contoh sebelumnya yang akan terus memanggil function dalam setInterval tanpa ujung.

SetTimeOut

Selain setInterval, ada satu function lagi yang hampir sejenis, yaitu setTimeOut. Function setTimeOut akan memanggil suatu function (sebanyak satu kali) setelah beberapa milidetik.

<HTML>
<HEAD>
</HEAD>
<BODY>
    <SCRIPT>
    var i=0;
    setTimeout(function(){
        document.write("sudah dua detik");
        i++;
    }, 2000);

    setTimeout(function(){
        document.write("sudah empat detik");
        i++;
    }, 4000);
    </SCRIPT>
</BODY>
</HTML>

Seperti setInterval yang memiliki pasangan clearInterval untuk menghentikan pemanggilan suatu function, kita juga bisa "membatalkan" pemanggilan setTimeout. Untuk membatalkan setTimeout, kita bisa menggunakan

<HTML>
<HEAD>
</HEAD>
<BODY>
    <SCRIPT>
    var i=0;
    pertama=setTimeout(function(){
        document.write("sudah dua detik ");
        i++;
    }, 2000);
    kedua=setTimeout(function(){
        document.write("sudah empat detik ");
        i++;
    }, 4000);
    clearTimeout(pertama);
</SCRIPT>
</BODY>
</HTML>