Javascript Zamanlayıcı (setTimeout) Kullanımı

Javascript ile web sayfası üzerinde bir fonksiyonu belli bir zaman aralığının ardından çalıştırabilirsiniz. Hatta aynı fonksiyonu belli zaman aralıkları ile tekrarlı bir biçimde çalıştırmanız da mümkündür. Bu işlem için setTimeout fonksiyonunu kullanmanız gerekmektedir.

Aşağıdaki html kodunda, div nesnesi içerisine belli aralıklarla span öğesi eklenmektedir.

<button onclick="startTimer();">Başlat</button>
<button onclick="stopTimer();">Durdur</button>
<div class="timer-div" style="border:1px solid black;width:200px;max-height:400px;height:100px;overflow:hidden;">
</div>

Javascript kısmında ise şu kodu kullanın.

var count = 0;
var timerId;
startTimer = function () {
    var div = document.getElementsByClassName('timer-div')[0];
    div.innerHTML += '' + count + ' yazıldı ';
    // 1 sn bekleme süresinin ardından startTimer tekrar çalışır
    timerId = setTimeout(startTimer, 1000);
    count++;
}

stopTimer = function () {
    var div = document.getElementsByClassName('timer-div')[0];
    div.innerHTML = '';
    clearTimeout(timerId); // beklenen timeout' u iptal eder
}