Javascript setTimeout ve setInterval Kullanımı

Javascriptte fonksiyonları mevcut zamandan daha ileri bir zamanda çalıştırabiliriz. Fonksiyonun çalışmasını erteleyebilir, zaman aşımına uğratabilir; belirli aralıklarla sürekli çalışmasını sağlayabiliriz. Bu işlemi yapabilmek için iki zamanlayıcı metot var:

setTimeout: Fonksiyonu belirlenen süreden sonra sadece bir kere çalıştırır.
setInterval: setTimeouttan farklı olarak fonksiyonu belirlenen aralıklarda sürekli çalıştırır.

setTimeout

setTimeout fonksiyonunu kullanabilmek için çalışacak fonksiyon ve milisaniye cinsinden zaman göndeririz. Gönderilecek fonksiyonun sadece adı yazıyoruz, fonksiyon çağırırken yaptığımız gibi parantez eklemiyoruz.

function message () {
  alert("Sadece bir kere çıktı verecek");
}
let time = setTimeout(message,3000);

Kod çalışınca 3 saniye sonra alert verir. 

let time = setTimeout(() => {
  alert("sadece bir kere çıktı verecek");
}, 3000);

Bu şekilde anonim fonksiyon kullanarak da yapabiliriz. Yukarıdaki kodla aynı sonucu verir.

clearTimeout

setTimeout ile oluşturulan zamanlama işlemini clearTimeout ile durdururuz. Metodun içine sadece durdurulmak istenen değişkeni göndeririz.

let time = setTimeout(() => {
  alert("bir şey yazmayacak");
}, 3000);
clearTimeout(time);

Ekrana hiçbir şey yazmaz çünkü clearTimeout ile iptal etmiş olduk.

setInterval

setInterval gönderilen fonksiyonu belirli aralıklarla sürekli olarak çalıştırır. Kullanımı bire bir setTimeout metodu gibidir.

let time = setInterval(function () {
   alert("Hello World");
},3000);

Yukarıda anonim fonksiyon ile alert verdirdik ama kodu bu şekilde bırakırsak 3 saniyede bir sürekli alert verir. clearInterval kullanarak bu tarz durumların önüne geçebilir, zamanlama işlemini iptal edebiliriz.

Yukarıdaki kodda setInterval ile 2 saniyede bir alert ver dedik ama bu sefer setTimeout metoduna clearIntervalı atadık ki sürekli alert vermesin. Sonuç olarak 2 kere alert verip durur, alert sayısını i değişkeni sayesinde ekrana yazdırır.

Yukarıdaki kodda setInterval ile geri sayım sayacı yaptık, 10 dan geriye saydırdık. Süre sıfırlanınca - ile saymaya devam etmemesi için clearInterval ile süreyi iptal ettik. Sayacın görünürlüğünü kapattık ki içindeki 0 yazısı ekranda görünmesin ve süre bittikten sonra  ekranda görünecek yazının görünürlüğünü açtık.