Bagaimana cara menunggu 5 detik dengan jQuery?

Saya mencoba membuat efek di mana halaman dimuat, dan setelah 5 detik, pesan sukses di layar memudar, atau meluncur.

Bagaimana saya bisa mencapai ini?

Dibangun pada setTimeout javascript .

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

UPDATE : Anda ingin menunggu sejak saat halaman selesai memuat, jadi letakkan kode itu di dalam $(document).ready(...);skrip Anda .

UPDATE 2 : jquery 1.4.0 memperkenalkan .delaymetode ini. Lihat itu . Perhatikan bahwa .delay hanya berfungsi dengan antrian efek jQuery.

Gunakan penghitung javascript biasa:

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

Ini akan menunggu 5 detik setelah DOM siap. Jika Anda ingin menunggu sampai halaman tersebut sebenarnya loadedAnda perlu menggunakan ini:

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

EDIT: Sebagai jawaban atas komentar OP yang menanyakan apakah ada cara untuk melakukannya di jQuery dan tidak menggunakan setTimeoutjawabannya tidak. Tetapi jika Anda ingin membuatnya lebih "jQueryish" Anda bisa membungkusnya seperti ini:

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

Anda dapat menyebutnya seperti ini:

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

Saya menemukan pertanyaan ini dan saya pikir saya akan memberikan pembaruan tentang topik ini. jQuery (v1.5 +) termasuk Deferredmodel, yang (meskipun tidak mematuhi spesifikasi Janji / A sampai jQuery 3) umumnya dianggap sebagai cara yang lebih jelas untuk mendekati banyak masalah asinkron. Menerapkan $.wait()metode menggunakan pendekatan ini sangat mudah dibaca saya percaya:

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

Dan inilah cara Anda dapat menggunakannya:

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

Namun jika, setelah jeda, Anda hanya ingin melakukan tindakan pada satu pilihan jQuery, maka Anda harus menggunakan asli jQuery .delay()yang saya percaya juga menggunakan Deferred's under the hood:

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

setTimeout(function(){


},5000); 

Tempatkan kode Anda di dalam { }

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

dll.

Telah menggunakan yang ini untuk hamparan pesan yang dapat ditutup segera pada klik atau melakukan autoclose setelah 10 detik.

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

The Menggarisbawahi perpustakaan juga menyediakan "penundaan" fungsi:

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

Berdasarkan jawaban Joey, saya datang dengan solusi yang dimaksud (oleh jQuery, baca tentang 'antrian').

Ini agak mengikuti sintaks jQuery.animate () - memungkinkan untuk dirantai dengan fungsi fx lainnya, mendukung 'lambat' dan jQuery.fx.speed lainnya serta sepenuhnya jQuery. Dan akan ditangani dengan cara yang sama seperti animasi, jika Anda menghentikannya.

jsFiddle test ground dengan lebih banyak penggunaan (seperti memamerkan .stop ()), dapat ditemukan di sini .

inti dari solusinya adalah:

$('<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>

keseluruhan sebagai plugin, mendukung penggunaan $ .wait () dan $ (..). wait ():

// 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>

Catatan: karena menunggu ditambahkan ke tumpukan animasi, $ .css () dieksekusi segera - seperti yang seharusnya: perilaku jQuery yang diharapkan.

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

Sadarilah bahwa ini adalah pertanyaan lama, tetapi saya menulis sebuah plugin untuk mengatasi masalah ini yang mungkin bermanfaat bagi seseorang.

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

memungkinkan Anda melakukan ini:

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