JavaScript Çorbası: Kasım 2018

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ı

5 Kasım 2018 Pazartesi

HTML Select Tag