JQuery ile 5 saniye nasıl beklenir?

Sayfanın yüklendiği bir efekt oluşturmaya çalışıyorum ve 5 saniye sonra ekrandaki başarı mesajı kayboluyor veya yukarı kayıyor.

Bunu nasıl başarabilirim?

Javascript setTimeout yerleşik .

setTimeout(
  function() 
  {
    //do something special
  }, 5000);

GÜNCELLEME : sayfanın yüklenmesi bittiğinden beri beklemek istiyorsunuz, bu yüzden kodu kodunuzun içine yerleştirin $(document).ready(...);.

GÜNCELLEME 2 : jquery 1.4.0 .delayyöntemi tanıttı . Şuna bir bak . .Delay öğesinin yalnızca jQuery efekt kuyruklarıyla çalıştığını unutmayın.

Normal bir javascript zamanlayıcısı kullanın:

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

DOM hazır olduktan sonra 5 saniye bekleyecektir. Sayfa gerçekten bitene kadar beklemek istiyorsanız, loadedbunu kullanmanız gerekir:

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

DÜZENLEME: OP'nin jQuery içinde bunu yapmak için bir yol olup olmadığını soran yorum setTimeoutcevap ve kullanmayın cevabı hayır. Ama daha "jQueryish" yapmak istersen bunu şöyle sarabilirsin:

$.wait = function( callback, seconds){
   return window.setTimeout( callback, seconds * 1000 );
}

Daha sonra şöyle diyebilirsiniz:

$.wait( function(){ $("#message").slideUp() }, 5);

Bu soruya rastladım ve bu konuda bir güncelleme yapacağımı düşündüm. jQuery (v1.5 +) ( jQuery 3'e kadar Vaatler / A spesifikasyonlarına uymamasına rağmen ) genellikle birçok asenkron soruna yaklaşmanın daha açık bir yolu olarak kabul edilen bir Deferredmodel içerir . Bu yaklaşımı kullanarak bir yöntem uygulamak özellikle okunabilir olduğuna inanıyorum:$.wait()

$.wait = function(ms) {
    var defer = $.Deferred();
    setTimeout(function() { defer.resolve(); }, ms);
    return defer;
};

İşte nasıl kullanabileceğiniz:

$.wait(5000).then(disco);

, Duraklatma sonra, yalnızca tek bir jQuery seçime eylemleri gerçekleştirmek istiyorsanız Ancak, o zaman gerektiğini jQuery'nin yerli kullanıyor .delay()başlık altında ben de Ertelendi kullanır inan:

$(".my-element").delay(5000).fadeIn();

setTimeout(function(){


},5000); 

Kodunuzu { }

300 = 0.3 seconds

700 = 0.7 seconds

1000 = 1 second

2000= 2 seconds

2200 = 2.2 seconds

3500 = 3.5 seconds

10000 = 10 seconds

vb.

Bunu, tıklandığında hemen kapatılabilen bir mesaj yer paylaşımı için kullanıyor veya 10 saniye sonra otomatik kapanma yapıyor.

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}

Underscore kütüphanesi aynı zamanda bir "gecikme" işlevini sağlamaktadır:

_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');

Joey'nin cevabına dayanarak, (jQuery tarafından, 'kuyruk' hakkında okuyun) bir çözüm buldum.

Bir şekilde jQuery.animate () sözdizimini izler - diğer fx işlevleriyle zincirlenmeye izin verir, 'yavaş' ve diğer jQuery.fx.speeds'i desteklemenin yanı sıra tamamen jQuery olmasını sağlar. Ve bunları durdurursanız, animasyonlarla aynı şekilde ele alınacaktır.

Daha fazla kullanım içeren jsFiddle test alanı (.stop () göstermek gibi) burada bulunabilir .

çözümün çekirdeği:

$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

$ .wait () ve $ (..) kullanımını destekleyen bir eklenti olarak.

// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {

  $.wait = function(duration, completeCallback, target) {
    $target = $(target || '<queue />');
    return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
  }

  $.fn.wait = function(duration, completeCallback) {
    return $.wait.call(this, duration, completeCallback, this);
  };

})(jQuery);

//TEST
$(function() {

  // stand alone
  $.wait(1000, function() {
    $('#result')
    .append('...done');
  });

  // chained
  $('#result')
  .append('go...')
  .wait('slow', function() {
    $(this).append('after slow');
  })
  .css({color: 'green'});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>

Not: wait, animasyon yığınına eklendiğinden $ .css () hemen yürütülür - tahmin edildiği gibi: beklenen jQuery davranışı.

$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );

Bunun eski bir soru olduğunu fark ettim, ancak birisinin yararlı bulabileceği bu sorunu çözmek için bir eklenti yazdım.

https://github.com/madbook/jquery.wait

bunu yapmanıza izin verir:

$('#myElement').addClass('load').wait(2000).addClass('done');