JavaScript Çorbası: Window Sınıfı Timer metodları

Giriş
Javascript ile her sayfa kendi başına bir uygulama gibi düşünülmeli. Sayfan çıkınca timer'da otomatik olarak durdurulur. Aynen uygulamanın sonlanması gibi. Javascript tek thread'lidir.

JavaScript is single-threaded, non-blocking, asynchronous, concurrent language.

clearInterval metodu - Periyodik Tmer İptali

Örnek

setInterval bir timer değeri döndürür.

var timer = setInterval(milisecondsToCheck, checkFunction);

Bunu şöyle iptal ederiz.

clearInterval(timer);

Örnek
Her saniye çalışan bir işi 1 dakika sonra durdurmak için şöyle yaparız.

const interval = setInterval(doWork, 1000);
setTimeout(() => clearInterval(interval), 59500);
doWork();

setInterval metodu - Periyodik Timer
Örnek
Bir değer döner. Şöyle yaparız.

let intervalId = setInterval(startTimer, 1000);
function startTimer() {
  ...
}

Örnek
Timer şöyle kurulur.

<script type='text/javascript'>
  function doSomething() { ... }
  x = setInterval(doSomething(), 60000);
</script>

Örnek
Pencere yüklenince timer başlatmak için şöyle yaparız.

<html>
<head>
  <title>...</title>
  <!-- PUT A PATH OF JQUERY LIBRARY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script>
    window.onload = function () {
        
        setInterval(function () {
            ...
        },2000);
    }
</script>
</head>
<body>
...
</body>
</html>

setTimeout metodu - Singleshot Timer

Bir metodun verilen milisaniye sonra çağrılmasını sağlar. En basit hali şöyle.

setTimeout(function() {
  // Do something later.
}, 1000);

Başka metodu çağırmak istersek şöyle yaparız.

<script>
function myFunction() {
    setTimeout(function(){MyFunc()},100);
}
</script>

<body onload="myFunction()">
</body>

setTimeout'un ilk parametresi sadece metod ismi olmalıdır. Aşağıdaki kodda yanlışlıkla foo() metod çağrısının sonucu setTimeout'a parametre olarak geçiliyor.

function foo(){
    console.log('hello world');
}

setTimeout(foo(), 2000);

Dolayısıyla çıktı şöyle.

start -> 'hello world' displayed immediately -> wait for 2 seconds -> end

Doğru kod şöyle.

function foo(){
    console.log('hello world');
}

setTimeout(foo, 2000);

Çıktı ise beklendiği gibi.

start -> wait for 2 seconds -> 'hello world' displayed -> end

JavaScript Çorbası

14 Kasım 2018 Çarşamba

Window Sınıfı Timer metodları

Hiç yorum yok:

Yorum Gönder