Javascript setTimeout(), clearTimeout() ve setInterval(), clearInterval() kullanımı

setTimeout() : fonksiyonumuzun milisaniye türünden belirleyeceğimiz bir süre sonrasında çalışmasını sağlar.

setInterval() : fonksiyonumuzun milisaniye türünden belirleyeceğimiz bir süre sonrasında tekrarlı bir şekilde çalışmasını sağlar.

Örnek kullanım:
Malzemeler:
1-) 2 adet div.

<div id="timeout">Saat kaç ?</div>
<div id="interval">Saat kaç ?</div>

2-) 1 adet o anki saat bilgisini bize getirecek bir javascript fonksiyonu.

function saatKac(){
      var d = new Date(); //Şuanki tarihi verir.
      var hour = d.getHours(); //Saati verir.
      var minute = d.getMinutes(); //Dakikayı verir.
      var second = d.getSeconds(); //Saniyeyi verir.
      return hour + ':' + minute + ':' + second; //Saat bilgilerimizi geri döndürüyoruz.
 }

şimdi de divlerimize saatKac fonksiyonundan dönen saat bilgimizi setTimeout() ve setInterval() kullanarak yazdıralım.

var div = document.getElementById('timeout');
var div2 = document.getElementById('interval');

window.setTimeout(function () { div.innerHTML = saatKac(); }, 3000);
//timeOut id li divimize 3 saniye sonra çalışacak şekilde ayarladığımız saaKac() fonksiyonumuzdan dönen değerimizi yazdırıyoruz.

window.setInterval(function () { div2.innerHTML = saatKac(); }, 1000);
//interval id li divimize her 1 saniyede 1 defa çalışacak şekilde ayarladığımız saatKac() fonksiyonumuzdan dönen değeri yazdırıyoruz.

hepsi bukadar. Böylece elimizde setInterval() kullanarak yaptığımız basit bir dijital saatimiz de oldu   
kodun tamamı aşağıdaki gibidir.

 <div id="timeout">Saat kaç ?</div>
 <div id="interval">Saat kaç ?</div>

<script type="text/javascript">   
     var div = document.getElementById('timeout');
     var div2 = document.getElementById('interval');
     window.setTimeout(function () { div.innerHTML = saatKac(); }, 3000);
     window.setInterval(function () { div2.innerHTML = saatKac(); }, 1000);
     function saatKac(){
         var d = new Date(); //Şuanki tarihi verir.
         var hour = d.getHours(); //Saati verir.
         var minute = d.getMinutes(); //Dakikayı verir.
         var second = d.getSeconds(); //Saniyeyi verir.
         return hour + ':' + minute + ':' + second; //Saat bilgilerimizi geri döndürüyoruz.
     }
</script>

setTimeout() ile çalıştırdığımız bir fonksiyonu kaldırmak için clearTimeout(), setInterval() ile çalıştırdığımız bir fonksiyonu kaldırmak içinse clearInterval() fonksiyonlarını kullanabiliriz. Bu fonksiyonlar parametre olarak bizden birer ID değeri isterler.

Bizde setTimeout() ve setInterval() fonksiyonlarını kullandığımız yerlerde bunları bir değişken üzerine alıp, clearTimeout() ve clearInterval() fonksiyonlarına parametre olarak bu değişkenleri verebiliriz.

Örnek Kullanım :

clearTimeout()
setTimeout() fonksiyonumuzu bir değişken üzerine alalım.

var timeoutId = window.setTimeout(function () { div.innerHTML = saatKac(); }, 3000);
//timeoutId değişkenimize setTimeout() fonksiyonumuzu atıyoruz.

clearTimeout() fonksiyonumuzu çalıştırmak istediğimiz yerde parametre olaraktimeoutID değişkenini verebiliriz.

window.clearTimeout(timeoutId);
//clearTimeout() fonksiyonuna parametre olarak timeoutId değişkenimizi veriyoruz.

clearInterval()
setInterval() fonksiyonumuzu bir değişken üzerine alalım.

var intervalId = window.setInterval(function () { div2.innerHTML = saatKac(); }, 1000);
//intervalId değişkenimize setInterval() fonksiyonunu atıyoruz.

clearInterval() fonksiyonumuzu çalıştırmak istediğimiz yerde parametre olarakintervalID değişkenini verebiliriz.

window.clearInterval(intervalId);
//clearInterval() fonksiyonuna parametre olarak intervalId değişkenimizi veriyoruz.

Read More