Javascript Scheduling: setTimeout and setInterval

Bu yazımda sizlere Javascript’in scheduling a call dediğimiz çağrı planlama yöntemlerinin nasıl çalıştığını, aralarındaki farkı ve birkaç örnek vererek anlatacağım.

Javascript kodu genellikle sync(eşzamanlı) olarak yürütülür. Ancak bazen bir fonksiyon hemen çalıştırılmak istenmeyebilir.Belli zaman aralıklarıyla tekrarlamasını istediğimiz ya da periyodik olarak tekrarladığımız işlem ve fonksiyonlar için bazı yerel JavaScript fonksiyonları (zamanlayıcılar) vardır.

• setTimeout()
• setInterval()

Bunlar, gelecekte bir noktada bir parça JavaScript kodu çalıştırmanıza izin verir.

Her iki metodun da benzerlikleri olsa da kullanım alanlarına göre farklı amaçları vardır.

setTimeout() Metodu:

Belirli bir milisaniye sonra bir fonksiyonu sadece bir kere çağıran JavaScript kodudur.

setTimeout’un fonksiyonu çağırmasını durdurmak için clearTimeout() metodu kullanılır.

Söz Dİzimi:

const timerId = setTimeout(fonk|kod, bekleme,[ arg1, arg2...])

Parametreler:

fonk|kod:Fonksiyon veya çalıştırılacak kodun karakter dizisi hali. Genelde bu fonksiyon olur.

bekleme:Milisaniye cinsiden çalışmadan önceki bekleme süresi.

arg1, arg2…Fonksiyon için gerekli argümanlar.

Örneğin aşağıdaki kod mesajYolla() fonksiyonunu bir saniye sonra çalıştırır:

function mesajYolla() {
  alert('Mesaj');
}
setTimeout(mesajYolla, 1000);

setTimeout ayrıca gecikmeden sonra ek argümanları da kabul edebilir ve ekstra değerler geri arama işlevine iletilir.

Argümanlı versiyonu:

function mesajYolla(ifade, kim) {
  alert( ifade + ', ' + kim );
}
setTimeout(mesajYolla, 1000, "Mesajınız var", "Merve"); // Mesajınız var, Merve

- clearTimeout() fonksiyonu ile iptal etme

setTimeout çağrısı “timer identifier” döner. Bu timerId ile zamanlayıcıyı durdurabiliriz.

Yazımı aşağıdaki gibidir:

function makaleyiBitir() {
  alert('bitti');
}
const timerId = setTimeout(makaleyiBitir,1000)setTimeout(() => {
clearTimeout(timerId)}, 2000);

JavaScript kodunun performansını artırmanın popüler bir yolu, 0ms gecikmeli çağrılarla zamanlayıcılar ayarlamaktır.

setTimeout(() => {
  console.log('Hello');
}, 0);
console.log('World');
// World
// Hello

Bu, programlamamızı yavaşlatan ve aşağıdaki işlevlerin yürütülmesini engelleyen görevlerin ertelenmesine yardımcı olur. setTimeout sadece geçmesi gereken minimum süreyi belirler. 0 değerinin ayrıca bildirilmesine gerek yoktur ve atlanmış olsa bile ima edilecektir.

Örnek:

Benim projede de sık sık kullandığım setTimeout() metodu ile örnek verecek olursam:

Daha efektif kullanabilmek için globalde bir değişkene atadım.

timeOutReference;

Sonrasında setTimeout()’a bağlayıp hangi fonksiyondan sonra çağrılacağı ve süresini tanımladım.Ardından clearTimeout() ile durdurulmasını sağladım.

this.timeOutReference = setTimeout(() => {
  this.init();
}, 3000);
clearTimeout(this.timeOutReference);

setInterval() Metodu:

Milisaniye cinsinden belirli aralıklarla bir kodu ya da fonksiyonu çağırması yani otomatik olarak kod bloklarımızı işletmek için kullanmaktayız.

setInterval() işlevi setTimeout() ile çok yakından ilişkilidir — hatta aynı sözdizimine sahiptirler:

Söz Dizimi:

let timerId = setInterval(func|code, delay[, arg1, arg2...])

setInterval metodu clearInterval() metodu çağrılana veya pencere kapatılıncaya kadar fonksiyonu çağırmaya devam eder.

Örnek:

Bu örneğimizde her üç saniyede bir ekrana Merhaba mesajı çıkartan bir uygulama yapalım.

setInterval(function(){
alert(“Merhaba”)
},3000);

Üstteki örneğimizde de gördüğünüz gibi 3000 milisaniyede bir alert fonksiyonuyla ekrana Merhaba içerikli mesaj çıkarmaktadır.

Örnek:

Yine projeden örnek verecek olursam.Websocket bildiğiniz gibi gerçek zamanlı web uygulamaları sürekli olarak veri alışverişinde bulunur.Avantajları olduğu kadar dezavantajı da bulunmakta bizde dezavantajlarından dolayı websocketi kaldırıp yerine API’den sürekli datayı çekmemiz gerekecek bir yapı gereksinimi duyduk. Burada devreye setInterval() girdi.

Bir ıntervalId tanımlayıp sayfaya giriş yaptığında bekleme süresiyle birlikte setIntervali çağırdım.Sayfadan çıkış yapıldğında clearInterval()’i çağırdım.

refreshIntervalId: any;
this.refreshIntervalId = setInterval(() => {
  this.getReport();

}, 5000);

stopInterval(): void {
  clearInterval(this.refreshIntervalId);
}
ngOnDestroy(): void {
  this.stopInterval();
}

** Burda sayfadan çıkarken ınterval isteğini durdurmak için ngOnDestroyda tanımladım.Böylelikle başka sayfaya geçince istek atmayı durdurmuş olacak.

İpuçları

• 1000 milisaniye = 1 saniye
• argümanlar IE9 öncesinde çalışmaz.
• function kullanımı kodlarımızın işleyişi açısından zorunludur.
• milisaniye zorunlu olarak belirtilmelidir.

! SetTimeout ile SetInterval ile arasındaki fark:

• setTimeout() verilen ifadeyi yalnızca bir kez tetiklerken setInterval(), verilen zaman aralığından sonra ifadeyi düzenli olarak tetiklemeye devam eder. (durmasını söylemediğiniz sürece).
• setInterval() kullanıldığında, ifadenin tetiklenmesi ile sonraki arasında neredeyse hiç gecikme olmaz.setTimeout() ile ifade değerlendirilirken, işlev çağrılırken ve yeni setTimeout() kurulurken nispeten uzun bir gecikme olur.Bu nedenle, düzenli, kesin zamanlama gerekiyorsa veya belirli zaman aralıklarından sonra tekrar tekrar bir şeyler yapılması gerekiyorsa, setInterval() en iyi seçiminizdir.

NOT: Tüm zamanlama metodları tam olarak gecikmeyi garantilemez.

Örneğin, tarayıcı zamanı birçok nedenden ötürü yavaşlayabilir:

• İşlemcinin yükü artarsa.
• Tarayıcının tab’ı arka plana alındıysa.
• Laptop batarya ile çalışıyorsa.

Bunların hepsi tarayıcı zamanına etki eder. Aralardaki gecikme 300ms ile 1000ms arasında değişebilir. Tabi tarayıcı ve özellikleri de bu konuda etkin rol oynar.

Umarım faydalı olmuştur.