JavaScript Timer Sınıfı – Zamanlayıcı Kullanımı:

JavaScript fonksiyonlarının belirlenen bir süre sonunda ya da belli aralıklarla tekrar ederek çalışmasını sağlayabiliriz.

setTimeout metodu istediğimiz fonksiyonun, belirtilen süre kadar sonra çalıştırılması, setInterval metodu ise istediğimiz fonksiyonun belirlenen aralıklarla sürekli olarak tekrar etmesini sağlar.

setTimeout Metodu

window.setTimeout( çalıştırılacakFonksiyonAdı, milisaniye)

Milisaniye cinsinden belirtilen süre kadar bekleyip, bu süre dolduğunda belirtilen fonksiyonu çalıştırır. Bu sayfada anlatılan tüm metotlar window sınıfına ait olup, metot isimlerinden önce Window sınıfı yazılmasa da olur.

<script>

setTimeout(aaa,3000);

function aaa() {

document.getElementById("sonuc").innerHTML="Süre doldu.";

}

</script>

Alttaki örnekte ise butona tıklandığında setTimeout metodu çalıştırılmış ve 2 saniye sonra yazdır fonksiyonunun çalışması sağlanmıştır.

<script>

function yazdir() {

document.getElementById("sonuc").innerHTML="Süre doldu.";

}

</script>

<button onclick="setTimeout(yazdir, 2000)">Süreyi Başlat</button>

setTimeout metodu çalıştırılıp geri sayım başladıktan sonra bu metodun çalışmasını engellemek istersek clearTimeout metodunu kullanabiliriz.

window.clearTimeout(degiskenAdi);

clearTimeout metodu içerisinde durdurulmak istenen setTimeout metodunun geri döndürdüğü değeri belirtmek gerekir. Bunun için de setTimeout metodu çalıştırılırken bir değişkene eşitlenir. Bu değişken clearTimeout metodu içinde kullanılarak ilgili setTimeout metodu durdurulur.

Var degisken1 = setTimeout(aaa, milliseconds);

Yukarıdaki gibi kullanılan bir setTimeout metodu, aşağıdaki şekilde çalışmadan durdurulabilir.

clearTimeout(degisken1);

Örnek: Sayfamızda iki tane buton bulunsun. Bunlardan ilki setTimeout metodunu çalıştırarak 3 sn sonra yazdır fonksiyonunun işletilmesini sağlasın. İkinci buton ise clearTimeout metodu ile zamanlanan işlemi durdursun. Yani ilk butona basıldıktan sonra 3 sn içinde ikinci butona basarak işlem iptal edilebilecektir.

Birinci butonu şu şekilde oluşturalım:

<button onclick="degisken1 = setTimeout(yazdir, 3000)">Süreyi Başlat</button>

İkinci buton da şu şekilde olmalı:

<button onclick="clearTimeout(degisken1)">Durdur</button>

 

setInterval() Methodu

Kullanımı setTimeout metodu gibidir. Yaptığı iş ise belirtilen fonksiyonu belirtilen süre kadar aralık ile sürekli çalıştırır.

window.setInterval(fonksiyonAdi, milisaniye);

Aşağıdaki örnekte bbb isimli fonksiyon saniyede 2 kez çağrılacak ve kutu1’in içine nokta karakteri ekleyecektir.

setInterval(bbb, 500);

function bbb() {

document.getElementById("kutu1").innerHTML+=".";

}

Bir başka örnek: O anki saati her saniye güncelleyerek yazdıralım.

setInterval(zamanGoster, 1000);

function zamanGoster () {

var saat = new Date();

document.getElementById("kutu1").innerHTML = saat.toLocaleTimeString();

}

Zamanlanmış bir fonksiyonu durdurmak için clearInterval metodu kullanılır.

window.clearInterval(degiskenAdi)

clearTimeout metodu ile aynı şekilde kullanılır. Durdurulacak olan setInterval metodunun eşitlendiği değişken kullanılır.

Var degisken1 = setInterval(bbb, 2000);

Şeklinde çalıştırılan bir setInterval metodu,

clearInterval(degisken1);

şeklinde durdurulabilir.

Örnek: 100’den geri doğru saymayı başlatan ve durduran iki buton hazırlayalım.

<script>

var sayac=100;

function say() {

document.getElementById("kutu1").innerHTML=sayac;

sayac--;

}

</script>

<p id="kutu1"></p>

<button onclick="degisken=setInterval(say, 1000)">Başlat/Devam</button>

<button onclick="clearInterval(degisken)">Durdur</button>

Örneklerin çalışan hallerini Konu Örnekleri kısmında görebilirsiniz.