JavaScript de setInterval ve setTimeout Kullanımı

Bir web uygulamasının client-side da bir işlemi belirli aralıklarla veya belirli bir süre geçtikten sonra gerçekleştirmemize yarayan setTimeout ve setInterval fonksiyonları vardır. Bütün web tarayıcılar bu iki fonksiyonu destekler. Bu yazımda sizlere bahsi geçen iki fonksiyon ile ilgili örnekler vermeye çalışacağım.

setTimeout

Bir işlemi belirli bir süre geçtikten sonra sadece bir seferliğine işleyen JavaScript fonksiyonudur. En yalın haliyle kullanımı aşağıdaki gibidir. 

setTimeout(FONKSİYON ADI, SÜRE);

Fonksiyonun ilk parametresi yerine doğrudan bir fonksiyon yazılabilir veya döküman üzerinde tanımlı bir fonksiyon adı yazılabilir. İkinci parametre ise süreyi ifade eder. Girilen değeri mili saniye olarak kabul eder. Örneğin döküman tamamen yüklendikten 20 saniye sonra bir fonksiyonu çalıştırmak istiyorsak aşağıdaki gibi bir script yazabiliriz.

function Foo(){ 
   // Çalıştırmak istediğiniz kodu buraya yazın 
} 
window.onload = function(){ 
  setTimeout(Foo, 20*1000); 
}

Yukarıdaki script'e göre Foo isimli fonksiyon döküman tamamen yüklendikten 20 saniye sonra çalışacaktır. Direkt bir fonksiyon adı yazmak yerine çalışmasını istediğiniz işlemi aşağıdaki gibi direkt lokal bir fonksiyon içerisinde de yazabilirsiniz. 

window.onload = function(){ 
   setTimeout(function(){ 
      // Çalıştırmak istediğiniz kodu buraya yazın 
   }, 20*1000); 
}

Yukarıdaki örnek ile Foo fonksiyonun birinci parametre olarak belirlendiği örnek aynıdır. Doküman yüklendikten 20 saniye sonra lokal fonksiyon içerisine yazılan kod çalışacaktır.

setInterval

Bir işlemi belirli zaman aralıklarında tekrarlayan iki parametre alan bir JavaScript fonksiyonudur. Kullanımı setTimeout gibidir ve iki adet parametre alır. Birinci parametre çalıştırılacak fonksiyonu, ikinci parametre de bu işlemin kaç mili saniye de tekrar edileceğini temsil eder. Direkt örnek vererek başlıyorum.

setInterval(function() {
    // Çalıştırmak istediğiniz kodu buraya yazın 
}, 2 * 1000);

Bu örneğe göre 2 saniyelik periyotlarla lokal fonksiyon içine yazdığımız kod çalışacaktır. Birinci parametreye lokal fonksiyon yazmak yerine döküman içindeki bir fonksiyonun adı da verilebilir.

setTimeout ve setInterval İşlemlerini Sonlandırma

Bu iki JavaScript fonksiyonu döküman içerisinde farklı bir thread de çalışır. Senaryomuza göre bazen belirlenen setTimeout veya setInterval fonksiyonlarını henüz çalışmadan veya çalıştıktan sonra (setInterval için) iptal etmek isteyebiliriz. Aşağıdaki script ile bu iki fonksiyonun çalışması engellenebilir. Yani ile işlem sonlandırılabilir.

var i = setInterval(Foo, 10 * 1000);
clearInterval(i);

var t = setTimeout(Foo, 10 * 1000);
clearTimeout(t);

Yukarıdaki örneklerde dikkat edilmesi gereken nokta; setInterval ve setTimeout fonksiyonları bir değişkene atama yapılarak çağrıldı. clearInterval(i) ile setInterval fonksiyonu sonlandırıldı. clearTimeout(t) ile setTimeout fonksiyonu sonlandırıldı.

Bu yazımda JavaScript in setTimeout ve setInterval fonksiyonlarını elimden geldiğince anlatmaya çalıştım. Umarım faydalı olmuştur. Herhangi bir sorunuz, eleştiriniz veya öneriniz varsa bu gönderinin altına yorum yapabilirsiniz veya buradan bana mesaj gönderebilirsiniz.

Sevgiyle Kalın