Javascript setTimeout ve setInterval fonsiyonları

Merhabalar arkadaşlar .
  Bu makalede javascript setTimeout() ve setInterval fonksiyonlarından bahsedip bir örnek uygulama yapıyoruz. Setinterval fonksiyonu basit olarak, belirli bir işlemi istenilen zaman aralıklarında yapmak için kullanılır . Örneğin bit butona basıldıktan sonra her 2 saniyede bir ekrana uyarı verdirilebilir. Hemen setInterval fonksiyonunun kullanımına bakalım: setInterval(islem, zaman); İslem: Bu parametre belli zaman aralaıklarında çalışacak olan kod ya da başka bir fonksiyon da olabilir. Zaman :Bu parametrede çalışacak kod ya da fonksiyonun hangi sıklıkla çalışacağını belirtir ve milisaniye cinsinden parametre alır. Örneğin 2 saniye için 2000 gibi… Şimdi butona basılınca 2 saniyede bir alert verdiren örneği yapalım daha sonra da biraz daha güzel bir örnek yapabiliriz.

<input onclick="setInterval('alert(\'Merhaba Millet\')', 2000)" id="Button2" type="button" value="İki Saniyede bir alert ver" />

Yukarıdaki örneği birde fonksiyon ile yapalım..

ilk olarak <head></head> arasına javasript fonksiyonunu yazalım

<script type="text/javascript">
	    function uyar()	  
            {
	    alert('Merhaba bu da fonsiyon ile yapılmış örnek');
	    }
	    </script>

sonra da butonun click eventini aşağıdaki gibi değiştirelim.

<input onclick="setInterval(uyar, 2000)" id="Button2" type="button" value="İki Saniyede bir alert ver" />

Şimdi akla gelen soru şu. Peki bu tekrar işlemini nasıl durduracağız.bu işlem için ise clearInterval() fonsiyonu bulunmakda  kullanımı ;

clearInterval(başlatılan interval işlemin idsi); yani bir interval işlemi başlatılırken ona bir de id verilmeli .yine yukarıdaki örnek ile deam edersek  kodu aşağıdaki gibi değiştirmemiz yeterli olacak.

 

	<input onclick="u=setInterval(uyar, 2000)" id="Button2" type="button" value="İki Saniyede bir alert ver" />

Şimdi de daha işe yarar ve birazdaha görsel bi örnek yapıp evimize gidelim.
Örnek uygulamamızda sayfa ilk açıldığında sayfanın ortasında bir reklam alanı efektli olarak açılacak üzerinde de kapat butonu olacak kapata tıklandığında yine efektli olarak kapancak.. Bu uygulamanın  Javascript Frameworklerinden biri olan Jquery ile çok daha basit ve güzel olarak yapabileceğini de söylemiş olalım tabi, Juqery bilenler hatırlayacaktır. Bu efektin adı slideUp ve slideDown. Neyse biz konumuza dönelim.

İlk olarak sayfamıza reklam için  bir Div elementi koyalım ve içine istediğimiz bir yazıyı yazalım.

<body onload="AcilistaGoster();">
	 
	  
	 
	    <div id="icerik" align="center"  style="width: 421px; height:1px; background-color: #990000; color: #FFFFFF; font-family: 'Arial Black'; font-size: 11px; text-align: center; position: absolute; top: 80px; left: 395px; display: none;">
	    <center> <a href="#" onclick="Basla()">Kapat</a>   </center><br />
	Yazılım Akademi, yazılımın her alanında, özellikle Java ve .NET teknolojilerine yönelik bir bilgi paylaşım platformudur.
	YazilimAkademi.com'un kurulmasındaki temel sebep,
	yazılıma merak duyup, bu konuda başlangıç seviyesinde makaleler bulamayanlardan, yazılım konusunda zaten çalışmalarına devam eden
	 ancak kendisini daha da geliştirmek isteyen kişilere kadar geniş bir yelpazedeki birçok kişi için kaliteli bir bilgi ve paylaşım	  platformu oluşturmaktır.Bu amaç doğrultusunda YazilimAkademi.com ekibi bünyesinde yer alan akademisyenler, çeşitli üniversitelerde
	   eğitimlerine devam eden öğrenci arkadaşlarımız, yazılımın her alanında faaliyet gösteren çeşitli kurum ve kuruluşlarda çalışan yazılımcı
	   arkadaşlarımız, bilginin paylaştıkça artacağını düşünüyor ve bu sebeple YazilimAkademi.com bünyesinde çalışmalarımıza devam ediyoruz.
	 
	   Sizde bizimle aynı düşünceleri paylaşıyorsanız ve tecrubelerinizi YazilimAkademi.com ziyaretçileri ve üyeleri ile paylaşmak istiyorsanız
	    hemen bizimle iletişime geçebilirsiniz.
	</div>
view source
print?	<p>
	    <input id="Button1" onclick="Basla();" type="button" value="Göster / Gizle" /></p>

div elementinin ilk sayfa yüklenidiğinde görünmemesi için stil özellikelrinden display:none yaptık .Şimdi JavaScript kodlarından devam edelim.

<head></head> arasına da aşağıdaki javascript kodunu yazıyoruz.

<script type="text/javascript">
	   var a;
	   var inter;
	   var inter2;
	   var durum=0;
	   function Basla()
	   {
	 
	   
	          if(durum==0)
	          {
	            document.getElementById('icerik').style.display='block';
	            if(inter!=null || inter2!=null )
	            return ;
	            inter =  setInterval(Goster,50);
	            
	          }
	          else if(durum==1)
	          {
	               if(inter!=null || inter2!=null )
	                return ;
	                inter2 =  setInterval(Gizle,50);
	                     
	              
	          }
	     
	   }
	    
	    
	    
	    function Gizle()
	    {
	        a=parseInt(document.getElementById('icerik').style.height);
	        a=parseInt(a)-10;
	        document.getElementById('icerik').style.height=a+'px';
	            if(parseInt(a)<=parseInt(1))
	            {
	            document.getElementById('icerik').style.display='none';
	            clearInterval(inter2);
	            durum=0;
	             inter2=null;
	    
	            }
	    
	    
	    }
	    
	    
	    function Goster()
	    {
	    a=parseInt(document.getElementById('icerik').style.height);
	    a=parseInt(a)+10;
	   document.getElementById('icerik').style.height=a+'px';
	         if(parseInt(a)>parseInt(300))
	         {
	           clearInterval(inter);
	            inter=null;
	     
	           durum=1;
	         }
	   }
	    
	 
	  function  AcilistaGoster()
	   {
	   var t=setTimeout(Basla,2000);
	   }
	    </script>

Peki ne yaptık ?

    İlk olarak saya ilk yüklendiğinde yani body onload eventinde AcilistaGoster(); fonksiyonunu çağırıp bir seferlik Basla adlı fonksiyonu setTimeout ile çalıştırdık.  Basla() fonsiyonu ise Goster() isimli fonsiyonumuz 50 milisaniye aralıkla çalıştırıyor.Ve geldik asıl fonskiyonumuz olan Goster() fonsiyonuna .

Goster() fonsiyonu bizim reklam alanımız olan ve icerik id sini verdiğimiz divin görünür olamsını ve  o andaki height degerini alıyor 10px artırıyor ve yeni yukseklik degeri olarak tekrar div elementimize set ediyor.( Bu arada div in ilk height değeri 1 olarak style içinde verilmişdi.) bu durumda Basla fonksiyonu 50 milisaniye aralıkla Goster() fonsiyonunu çağırdığan göre div in yüksekliği 50 milisaniye aralıklarla 10px artarak devam ediyor dati Goster() fonksiyonu içindeki kontol doğru olana kadar yani div in yuksekliği 300 olana kadar yukseklik 300 oldugu zaman intervalimiz durduruluyor, ve durum degiskenimiz 1 e eşitleniyor .bunun nedensi ise koddan da anlaşılacağı üzere Basla() fonksiyonu içerisinde ddurum degeri 1 ise div gizleniyor 0 ise gosteriliyor. Sonra kapat butonuna tıklandığı zaman ise Goster yerine Gizle fonksiyonu çalıştırılıp aynı işlemin tersi yapılıyor.

 

Umarım faydalı bir örnek uygulama olmuştur.
Görüşmek Üzere

	<script type="text/javascript">
	    var u;//interval için genel bir değişken tanımladık yani id si
	    var sayac=0;// ve 3 kereden sonra uyarıyı bitirmesi yani intervali temizlemisi için bir sayaç
	    function uyar()
	    {
	    alert('Merhaba bu da fonsiyon ile yapılmış örnek');//işlem satırı
	    sayac++;// sayaç bir arttı
	    if(sayac>=3)//sayaç büyük ya da eşitmi 3 e
	    clearInterval(u);//ve sayaç 3 e eşit ise tekrar işlemini sonlandırılıyor.
	    }
	    </script>

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat