4.7/5 Görüntülenme: 5520

Javascript Timer ile döngü Jquery Loop


Javascript ile sürekli işlem yapacak döngüler oluşturmak için setTimeout fonksiyonunu kullanabiliriz. Bu konuda Javascript ve jQuery ile nasıl döngü fonksiyonu kurabiliriz ayrı ayrı kullanım şeklini göstermeye çalışacağım.

 

Javascript timer Döngü örneği

Bu örnekte herhangibir bölümü 2 saniyede bir değiştirmeyi düşünelim. Menümüz anasayfa oranın aynı zamanda tüm ürünler bölümü olduğunu vurgulamak için sürekli değişmesini istiyoruz. Sadece Javascript ile aşağıdaki şekilde yapabiliriz.

--- Örnek Görünüm:

Anasayfa

---

<div id="homeBtn">Anasayfa</div>
<script type="text/javascript" charset="utf-8">
  mycode();
  function mycode() {
    if(document.getElementById('homeBtn').innerHTML=="Anasayfa")
    {document.getElementById('homeBtn').innerHTML='<font style="color:#D70005;">Tüm Ürünler</font>';}
    else{document.getElementById('homeBtn').innerHTML='Anasayfa'; }
    setTimeout(mycode, 2000);
  // repeat myself
  }
</script>

Not: bu şekilde sadece js ile yaptığımızda js kodların tanımlanan id satırının altındaki satırlarda olması gerekli. Aksinde önce id arayacak ve bulamayacaktır. Aşağıdaki jquery örneğinde ise buna gerek kalmıyor, çünkü sayfa yüklenmesi tamamlandıktan sonra işlem yaptırmaya başlıyoruz.

jQuery Timer Loop kullanımı

<script type="text/javascript" src="http://limitsizbilgi.com/js/jquery.min.1.7.1.js"></script>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){ // sayfa yüklenmesi tamamlanınca işlem yap.

   mycode();
  });
  function mycode() {   

    if($('#homeBtn').html()=="Anasayfa")

     {$('#homeBtn').html('<font style="color:#D70005;">Tüm Ürünler</font>');}

     else{$('#homeBtn').html('Anasayfa');}
     setTimeout(mycode, 2000);
  // repeat myself
  } 
 </script>

<div id="homeBtn">Anasayfa</div>


Konu (119) ile ilgili admin @ limitsizbilgi.com adresine E-mail gönderebilirsiniz. İsa Şahintürk