JAVASCRIPT ZAMANLAYICILAR - SETTIMEOUT , SETINTERVAL

Javascript'te fonksiyonları istediğimiz bir süre sonra yada istediğimiz sürede tekrarlı bir şekilde çalıştıtrabiliriz. Bunun için zamanlama metodlarından faydalanırız. 

• setTimeout()        // bir kez zamanlama
• clearTimeout()     
• setInterval()         // tekrarlı zamanlama
• clearInterval()

setTimeout() 

Bir fonksiyonu, istediğimiz bir zaman sonra tek bir kez çalıştırmak için setTimeout metodunu kullanırız.

setTimeout(fonksiyon,sure);

Fonksiyon olduğu yerde tanımlabildiği gibi , başka bir yerde tanımlanmış olabilir.  Süreyi  ise milisaniye cinsinden yazmamız gerekiyor. Gelin iki kullanımada bakalım. 

<script>
  setTimeout(function() {
	alert("2 Saniye sonra çalışacak...");
  },2000);
</script>

Yukarıda fonksiyonu olduğu yerde tanımladık ve 2000ms (2 saniye)  süre verdik. Script çalıştığında , 2 saniye sonra  ekranda "2 saniye sonra çalışacak" uyarı kutusu görünür:

Peki fonksiyonu başka bir yerde tanımlayıp sonra setTimeout metodunu nasıl çalıştırıyoruz gelin onada bakalım.

<script>
   
  function  zaman() {
	alert("2 Saniye sonra çalışacak...");
  }  

setTimeout(zaman,2000);
  // zaman foksiyonu 2 saniye sonra çalışır..

</script>

Yukarıda zaman isimli foksiyonu setTimeout'tan bağımsız olarak oluşturduk. (Fonksiyonun zamanlamadan önce yada sonra oluşturulması önemli değil)  setTimeout zamanlamasını ise sonra. çalıştırdık.  Burada  bir şeye dikkat etmemiz gerekiyor. setTimeout parantezinde fonksiyon adını yazarken , normalde yaptığımız gibi fonksiyon adının sonuna parantezleri eklemiyoruz. Eklemeniz durumunda zamanlama çalışmayacaktır!!

clearTimeout() 

setTimeout() ile başlatılan zamanlamayı durdurmak için clearTimeout() metodunu kullanıyoruz. Bunun için öncelikle setTimeout zamanlamasını bir değişkene aktarmamız  gerekiyor. 

<script>
  
zamanlayici=setTimeout(zaman,2000);
  //  zamanlamayı değişkene aktardık..


  function  zaman() {
	alert("2 Saniye sonra çalışacak...");
  }  


clearTimeout(zamanlama);
// zamanlayıcıyı durdurduk..

</script>

Yukarıda clear Timeout ile zamanlayıcıyoı durdurmuş olduk. Bu işlemi bir buton aracılığıyla yapabiliriz. 

<button onclick="durdur()"> Durdur </button>

<script>
  
zamanlayici=setTimeout(zaman,2000);
  //  zamanlamayı değişkene aktardık..

  function  zaman() {
	alert("2 Saniye sonra çalışacak...");
  }  

function durdur() {
  clearTimeout(zamanlama);
}
// zamanlayıcıyı durduracak fonksiyon

</script>

Burada , buton tıklandığında durdur() fonksiyonu çalışacak ve setTimeout zamanlaması durdurulacaktır.  Ama belirtilen süre içerisinde(2s)  tıklanırsa tabiki.. 

setInterval() 

setınterval() metodu ,  setTimeout'tan farklı olarak , fonksiyonun istenilen zamanda sadece bir kez değil , sürekli çalışmasını sağlar. Kullanımı setTimeout ile aynıdır.  

setInterval(fonksiyon,sure);

Fonksiyonu yine olduğu yerde tanımlayabildiğimiz gibi başka bir yerdede tanımlayabiliriz. Örneğin saniyede bir ekrana "javascript" yazdıran scripti 2 yol ile yazalım.

<script>
 
// 1. YOL 

setInterval(function() {
  document.write("JAVASCRIPT");
   },1000);

// fonksiyonu olduğu yerde tanımladık..


// 2. YOL

function yazdir() {
  document.write("JAVASCRIPT");
}
setInterval(yazdir,1000);

//fonksiyon önceden tanımlandı..

</script>

Yukarıdaki 2 yolda da ekranda saniyede bir (1000ms) "JAVASCRIPT" yazacaktır.  Fonksiyonun başka yerde tanımlandığı durumlarda, setInterval ile çağrılırken , setTimeout metodunda olduğu gibi fonksiyon adının sonıuna parantezler eklenmemelidir.

clear Interval() 

setInterval() ile başlatılan zamanlamayı durdurmak için clearInterval() metodunu kullanıyoruz. Bunun için yine  öncelikle setInterval() zamanlamasını bir değişkene aktarmamız  gerekiyor. 

<script>
 
 zamanlayici=setInterval(function() {
  document.write("JAVASCRIPT");
   },1000);

clearInterval(zamanlayici);

</script>

Yukarıda clearInterval zamanlayıcıyı doğrudan  sonlandıracaktır. Ancak bunun bir süre sonra olmasını sağlayabilriiz. Örneğin , saniyede bir tekrar eden fonksiyonu 10s sonra sonlandıralım.

<script>
 
 zamanlayici=setInterval(function() {
  document.write("JAVASCRIPT");
   },1000);

setTimeout(function() {
   clearInterval(zamanlayici); 
},10000);
// 10s sonra zamanlayıcı duracaktır..

</script>

Örnekte hem setInterval hemde setTimeout komutlarını kullanmış olduk. setInterval ile saniyede bir tekrarlayan fonksiyon , 10 saniye boyunca çalıştıktan sonra durdurulacaktır. Yani ekranda 1er saniye arayla 10 defa "JAVASCRIPT" yazmış olur.