Zamanlama: setTimeout ve setInterval

Bir fonksiyon hemen çalıştırılmak istenmeyebilir, belirli bir zaman sonra çalışması istenebilir. Buna “çağrıyı zamanlama” denir.

Bunun için iki metod var:

• setTimeout fonksiyonu belirli bir zaman sonra çalıştırmaya yarar.
• setInterval fonksiyonun belirli aralıklar ile sürekli çalışmasını saÄŸlar.

Bu metodlar JavaScript’in tanımları arasında yer almaz. Fakat çoğu ortam bu metodları sunar. Daha özele inecek olursak tüm tarayıcılar ve NodeJS bu metodları sağlar.

setTimeout

Yazımı:

let zamanlayiciId = setTimeout(fonk|kod, bekleme[, arg1, arg2...])

Parametreler:

fonk|kod

Fonksiyon veya çalıştırılacak kodun karakter dizisi hali. Genelde bu fonksiyon olur. Uyumluluk dolayısıyla karakter dizisi de gönderilebilir fakat önerilmez.

bekleme

Milisaniye cinsiden çalışmadan önceki bekleme süresi.(1000 ms = 1 saniye).

arg1, arg2…

Fonksiyon için gerekli argümanlar.( IE9 öncesinde çalışmaz.)

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

function selamVer() {
  alert('Selam');
}

setTimeout(selamVer, 1000);

Argümanlı versiyonu:

function selamVer(ifade, kim) {
  alert( ifade + ', ' + kim );
}

setTimeout(selamVer, 1000, "Merhaba", "Ahmet"); // Merhaba, Ahmet

Eğer ilk argüman karakter dizisi ise, sonrasında JavaScript bundan fonksiyon üretir.

Aşağıdaki de aynı şekilde çalışacaktır:

setTimeout("selamVer('Merhaba')", 1000);

Karakter dizisi olarak fonksiyon göndermek aslında pek önerilmez, bunun yerine aşağıdaki gibi fonksiyon kullanılması daha doğrudur:

setTimeout(() => alert('Merhaba'), 1000);

// yanlış!
setTimeout(selamVer(), 1000);

clearTimeout fonksiyonu ile iptal etme

setTimeout çaÄŸrısı “timer identifier” döner. Bu timerId ile zamanlayıcıyı iptal edebiliriz.

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

let timerId = setTimeout(...);
clearTimeout(timerId);

Aşağıdaki kodda önce bir zamanlayıcı test eder sonrasında ise bunu iptal eder. Sonuç olarak hiçbir şey olmaz:

let timerId = setTimeout(() => alert("Bir ÅŸey olmayacak"), 1000);
alert(timerId); // timer identifier

clearTimeout(timerId);
alert(timerId); // same identifier (iptal ettikten sonra null olmaz)

alert çıktısından da göreceÄŸiniz gibi timer bir id numarası ile tanımlanır. DiÄŸer ortamlarda bu baÅŸka bir ÅŸey olabilir. ÖrneÄŸin Node.Js bir sayı yerine farklı metodları olan timer objesi döner.

Tekrar söylemek gerekirse üzerinde anlaşılmış bir şartname bulunmamaktadır.

Tarayıcılar için zamanlayıcılar zamanlayıcı bölümünde belirtilmiştir.

setInterval

setInterval setTimeout ile aynı yazıma sahiptir:

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

Tüm argümanlar aynı anlama gelir. Fakat setTimeout’a nazaran fonksiyonu sadece bir defa deÄŸil belirtilen zamanda sürekli olarak çalıştırır.

Bu zamanlayıcıyı iptal etmek için clearInterval(timerId) kullanılmalıdır.

Aşağıdaki örnekte mesaj her iki saniyede bir gönderilecektir. 5 saniye sonunda ise durdurulur.

// her iki sn'de tekrar et
let timerId = setInterval(() => alert('tick'), 2000);

// 5 saniye sonunda durdur.
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);

Tekrarlı setTimeout

Bir kodu düzenli olarak çalıştırmanın iki yolu bulunmaktadır.

Ä°lki setInterval diÄŸeri ise aÅŸağıdaki gibi kullanılan setTimeout:

/** instead of:
let timerId = setInterval(() => alert('tick'), 2000);
*/

let timerId = setTimeout(function tick() {
  alert('tick');
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);

setTimeout bir sonraki çaÄŸrıyı o anki çaÄŸrı bittiÄŸi ana planlar (*)

Kendini tekrar eden setInterval setTimeout’dan daha esnektir. Bu ÅŸekliyle kullanıldığında bir sonraki planlanan çaÄŸrı ana çaÄŸrının durumuna göre ötelebilir veya daha geriye alınabilir.

Örneğin, her 5 sn’de bir sunucudan veri isteyen bir servis yazmamız gerekmektedir. Fakat sunucuya fazladan yük binerse bunun 10,20,40 sn olarak değiştirilmesi gerekmektedir.

Bahsedilen kod aşağıdaki gibidir:

let delay = 5000;

let timerId = setTimeout(function request() {
  ...talep gönder...

  if (sunucu yüklenmesinden dolayı eğer talep iptal olursa) {
    // bir sonraki talep için gerekli süreyi uzat.
    delay *= 2;
  }

  timerId = setTimeout(request, delay);

}, delay);

Eğer CPU-aç görevleriniz varsa bu görevlerin süresini ölçüp buna göre bir çalışma planı oluşturmak mümkündür.

Kendini tekrar eden setInterval iki çaÄŸrı arasındaki süreyi garanti eder fakat setTimeout bunu garanti etmez.

Aşağıdaki iki kod parçacığı karşılaştırılacak olursa:

let i = 1;
setInterval(function() {
  func(i);
}, 100);

Ä°kincisi tekrarlı setTimeout kullanmaktadır.

let i = 1;
setTimeout(function run() {
  func(i);
  setTimeout(run, 100);
}, 100);

setInterval func(i) fonksiyonunu her 100ms’de bir çalıştırır.

Dikkatinizi çekti mi?…

func çaÄŸrıları arasındaki geçen süre koddan daha kısa.

DoÄŸal olan bu aslında çünkü func çalıştığında bu arlığın bir kısmını harcar.

Hatta bu func çalışmasının bizim beklediÄŸimiz 100ms’den fazla olması da mümkündür.

Bu durumda JS Motoru func fonksiyonunun bitmesini bekler, sonra planlayıcıyı kontrol eder eÄŸer zaman geçmiÅŸse hiç beklemeden tekrar çalıştırır.

Bu durumda ile karşılaşıldığında fonksiyon hiç beklemeden sürekli çalışır.

AÅŸağıda ise kendini çağıran setTimeout gösterilmiÅŸtir:

Kendini çağıran setTimeout arada geçen sürenin aynı olmasını garanti eder.(burada 100ms).

Bunun nedeni yeni çağrının önceki çağrının bitiminde hesaplanmasından dolayıdır.

// zamanlayıcı çağırana kadar fonksiyon hafızada kalır.
setTimeout(function() {...}, 100);

setTimeout(…,0)

setTimeOut’un farklı bir kullanım ÅŸekli daha bulunmakta: setTimeout(func, 0)

Bu func’ın mümkün olduÄŸu anda zamanlanmasını saÄŸlar. Fakat zamanlayıcı bunu sadece o anki kod iÅŸlemi bittiÄŸinde gerçekleÅŸtirir.

Bundan dolayı zamanlayıcı o anki işin “hemen arkasından” çalışmaya başlar. Diğer bir deyişle “asenkron”.

Örneğin aşağıdaki kod önce “Merhaba” ve hemen arkasından “Dünya” yazdırır.

setTimeout(() => alert("Dünya"), 0);

alert("Merhaba");

Ä°lk satırda “çaÄŸrıyı 0ms sonra sıraya koy” demektir. Fakat zamanlayıcı bunu “önce sırayı kontrol et”'ten sonra bakar yani o anki kodu çalıştırdıktan sonra. Bundan dolayı "Merhaba" önce yazılır "Dünya" sonra.

CPU-aç görevlerin parçalanması

setTimeout ile CPU-aç görevlerin kullanılabilmesi şöyle bir yöntem kullanılabilir.

Örneğin, yazıların renklerini değiştiren ( şu anki sayfa gibi ) bir uygulama tam olarak CPU-aç bir uygulamadır. Analiz eder, birçok renkli eleman yaratır, bunları dökümana ekler dosya büyüdükçe bu da gittikçe daha fazla işlemci gerektirir. Hatta tarayıcının "hang " durumuna yani tepki vermemesine kadar gidebilir, bu da kabul edilemez.

Bundan dolayı uzun metinleri ayırabiliriz. Önce 100 satır, sonra diğer bir 100 satır vs.

Daha basit bir örnekten anlatmaya çalışırsak. Bir fonksiyonunuz olsun ve 1’den 100000000000’a kadar saysın

Eğer kodu çalıştırırsanız işlemci tepki vermemeye başlar. Sunucu tabanlı JS kodlarında bu kolay bir şekilde fark edilebilir fakat eğer bu kodu tarayıcı üzerinde çalıştırıyorsanız diğer butonlara tıkladığınızda JavaScript’in durduğunu ve bunun bitene kadar da başka bir şeyin çalışmadığını görürsünüz.

let i = 0;

let start = Date.now();

function count() {

  // yoÄŸun bir iÅŸ
  for(let j = 0; j < 1e9; j++) {
    i++;
  }

  alert((Date.now() - start) + 'ms de tamamlandı');
}

count();

Hatta taryıcı “bu kodun çalışması uzun zaman alıyor” uyarısı verebilir.

Kodu setTimeout ile bölecek olursak:

let i = 0;

let start = Date.now();

function count() {

  // zorlu görevin bir bölümünü yap (*)
  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert((Date.now() - start) + 'ms de tamamlandı');
  } else {
    setTimeout(count, 0); // yeni çağrıyı zamanla (**)
  }

}

count();

Şimdi tarayıcı ekranı “sayma işlemi” gerçekleşirken tamamen çalışır durumdadır.

Ä°ÅŸin bir bölümü ÅŸu ÅŸekilde yapılır (*)

1. Ä°lk çalışma: i=1...1000000.
2. ikinci çalışma: i=1000001..2000000
3. … bu ÅŸekilde while i nin 100000’e bölünüp bölünmediÄŸine kadar.

EÄŸer iÅŸlem hala bitmemiÅŸse (**) zamanlayıcısı tekrar çalışır.

Sayaç çalışırken duraklama yapılması JavaScript motoruna “nefes alması” ve başka iş yapabilmesi için zaman sağlar.

Dikkat edilmesi gereken nokta: setInterval kullanılarak ve kullanılmadan yapılan iki testin çalışma süreleri çok farklı deÄŸildir.

Bu süreleri daha da yakınlaştırabilmek için neler yapılabilir bakalım.

Zamanlamayı count() fonksiyonunun başına alalım:

let i = 0;

let start = Date.now();

function count() {

  // zamanlama başa taşındı
  if (i < 1e9 - 1e6) {
    setTimeout(count, 0); // yeni çağrıyı zamanla
  }

  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert((Date.now() - start) + 'ms de tamamlandı');
  }

}

count();

Åžimdi ise count() ile baÅŸlıyoruz ve count fonksiyonunun birden fazla çağırılacağınız biliyoruz.

Çalıştırırsanız belirgin biçimde daha kısa süreceğini göreceksiniz.

let start = Date.now();
let times = [];

setTimeout(function run() {
  times.push(Date.now() - start); // bir önceki çağrıdaki gecikmeyi hatırla.

  if (start + 100 < Date.now()) alert(times); // gecikme 100ms den büyükse göster
  else setTimeout(run, 0); // deÄŸilse tekrar zamanla
}, 0);

// Çıktının örneği:
// 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100

Tarayıcının işlemesine izin vermek.

Tarayıcı taraflı kodların diğer bir yararı ise kullanıcıya progresss bar(ilerleme çubuğu) tarzında görselleri sunabilmesidir. Tarayıcı genelde “tekrar boyama” kod tekrarlandıktan sonra ( repainting) işlemi yaptığından.

Bundan dolayı diyelim ki çok büyük işler yapan bir fonksiyon olsa bile, dökümanda bulunan değişiklik bu işlem tamamlandıktan sonra gerçekleşir.

ÖrneğiN:

<div id="progress"></div>

<script>
  let i = 0;

  function count() {
    for(let j = 0; j < 1e6; j++) {
      i++;
      // anlık i değerini dive yazdır. <div>
      // ( innerHTML ile ilgili daha sonraki bölümlerde konuşulacaktır.)
      progress.innerHTML = i;
    }
  }

  count();
</script>

Bunu çalıştıdığınızda i’nin deÄŸiÅŸikliÄŸi tüm sayma iÅŸlemi bittikten sonra görünür hale gelir.

eÄŸer bunu setTimeout ile parçalara bölecek olursak bu defa daha güzel bir ÅŸekilde görünecektir.

<div id="progress"></div>

<script>
  let i = 0;

  function count() {

    // yoğun işin bir bölümü (*)
    do {
      i++;
      progress.innerHTML = i;
    } while (i % 1e3 != 0);

    if (i < 1e9) {
      setTimeout(count, 0);
    }

  }

  count();
</script>

Artık <div> i nin yükselen deÄŸerini gösterecektir.

Özet

• setInterval(func, delay, ...args) ve setTimeout(func, delay, ...args) metodları func’ın düzenli olarak delay ms aralıklar ile çalışmasını saÄŸlar.
• Çalışmayı durdurmak için clearInterval/clearTimout fonksiyonları setInterval/setTimeout metodundan dönen deÄŸerler ile çağırılmalıdır.
• İç içe setTimeout çaÄŸrısı kullanmak setInterval’e göre daha esnektir. Ayrıca bu ÅŸekilde aralarda en kısa süre beklemesini saÄŸlar.
• 0 gecikmeli zamanlayıcı ise setTimeout(...,0) zamanlayıcıyı olabildiÄŸince çabuk fakat o anki koddan sonra çağırılacak ÅŸekilde zamanlar.

setTimeout(...,0)'ın bazı kullanım durumları:

• CPU-aç görevleri parçalara ayırmak için, böylece kod sürekli tepki verebilir.
• Böylece görev devam ederken tarayıcının baÅŸka iÅŸlere ( ilerleme çubuÄŸu ) zaman ayırır.

Tüm zamanlama metodları tam olarak gecikmeyi garantilemez. Zamanlayıcıda bu varsayımın üzerine bir şey inşa etmeyin.

Ö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.