Thursday, July 23, 2009

jquery işlemlerinde setTimeout kullanmak

NOT DÜŞTÜM

Jquery ile geçiktirme meselesinin çok sorulduğunu farkettim. Şaşırdım. Halbuki javascript ile bir farkı yok ki?
Ancak tabi ki daha düzenli kullanmakta fayda var.
Bu alttaki iki satırı jquery yükledikten hemen sonra çalıştırırsanız elinizde "timeout" diye bir fonksiyon olur. Yaptığı çok özel bir şey yok. Sadece jquery işlemerinizde daha kolay kullanılabilir hale getirilmiş setTimeout fonksiyonundan ibaret.
$.fn.timeout = function(t,f){
 this.each(function(){setTimeout(f,t); }); 
 return this; };

Şöyle üç şekilde kullanımına örnek verdim

js:
$(document).ready(function(){
 
  $("#metin").click(function(){  
   $(this).timeout(1000,function(){
   $("#icmetin").html("1 saniye sonra gelen mesaj");
    $(this).timeout(2000,function(){     
     $("#icmetin").append("
ilk 1 saniyelik ekleyiş ardından 2 saniye sonra gelen gelen mesaj");
    }); 
   })
   .timeout(2000,function(){     
    $("#icmetin").append("
 2 saniye sonra gelen gelen mesaj");
   });
  });
});

html:

<a href="#" id="metin">tikla</a> <div id="icmetin"></div>

şurada çalıştırarak görebilir : http://jsbin.com/ivetu
ve burada da kodları değiştirip deneyebilirsiniz : http://jsbin.com/ivetu/edit

---
Farkettim ki yukarıdaki çok karışık geliyor insanlara. halbuki kullanım kolaylığını göstermek için çeşitli şekillerde örnek vermişdim. Neyse, hasılı, nihayetinde şöyle de kullanabilirsiniz:

Alıntı :

  1. $(document).ready(function() {  
  2.    window.setTimeout(function() {  
  3.      // islem islem islem  
  4.    }, 1000);  
  5. });  

9 comments:

Matshman said...

Merhaba, teşekkürler.

..#icmetin").html("video kodu");

şeklinde çalıştıramadım. Facebooktaki gibi yapamazmıyız. linke tıkladığında videoyu çekse. yardımcı olursanız sevinirim.

Hasan Tayyar Beşik said...

sorun olmaamalı bakın bir örnek:


http://pastebin.com/f515b85b9

Anonymous said...

geçem süreyi güncel olarak gösterebilirmiyiz. Yani 10 saniye kaldı ,9,8,7,... diye bilgilendirme olarak

rcpyksl said...

teşekkürler çok işime yaradı saol

Hasan Tayyar Beşik said...

İşinize yaraması güzel, ama yeni bir şey değil aslında. Saece setTimeout() için pratik bir yol.

Bu arada yukardaki anonim kişinin sorusunun yanıtı ise "evet"

üst bir değişkeni fonk. içinde azaltarak kullanabilir ve geri sayım yapabilirsiniz. Örnek bir kod yazayım birazdan.

mustafa geçkin said...

dediğiniz örnek kodu verebilirmisiniz ,hayat kurtaran insten bir örnek olacak benim için de teşekkürler :)

Hasan Tayyar Beşik said...

buyrunuz :

http://jsbin.com/ivetu/26/edit

Anonymous said...

Bu Kod için çok teşekkür ederim şahsan çok işime yaradı

Anonymous said...

Merhabalar, ben söyle bir sorunun cevabını arıyorum; bir Jquery eklentisi ile uyarı ekranı var ve kodun başında
if($('#uyari').length){
return false;
}
mantığı kullanılmış, şimdi buradaki problem eğer ekranda bir uyari varsa ve başka bir fonksiyon (mesela bir Ajax isteği) çabuk bir şekilde yeni bir uyarı göstermek istiyorsa yeni uyarı ekrana getirilmiyor. Bunu bir settimeout metoduna bağlayıp Eğer ekranda bir uyarı varsa 1 saniye sonya yeniden dene diyebiirmiyiz? Teşekkürler