Làm thế nào để chờ 5 giây với jQuery?

Tôi đang cố gắng tạo hiệu ứng khi tải trang và sau 5 giây, thông báo thành công trên màn hình mờ dần hoặc trượt lên.

Làm thế nào tôi có thể đạt được điều này?

Được xây dựng trong javascript setTimeout .

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

CẬP NHẬT : bạn muốn đợi kể từ khi trang tải xong, vì vậy hãy đặt mã đó vào trong $(document).ready(...);tập lệnh của bạn .

CẬP NHẬT 2 : jquery 1.4.0 giới thiệu .delayphương pháp. Kiểm tra nó ra . Lưu ý rằng .delay chỉ hoạt động với hàng đợi hiệu ứng jQuery.

Sử dụng bộ đếm thời gian javascript thông thường:

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

Điều này sẽ đợi 5 giây sau khi DOM sẵn sàng. Nếu bạn muốn đợi cho đến khi trang thực sự loadedbạn cần sử dụng điều này:

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

EDIT: Trả lời bình luận của OP hỏi xem có cách nào để làm điều đó trong jQuery và không sử dụng setTimeoutcâu trả lời là không. Nhưng nếu bạn muốn làm cho nó trở nên "jQueryish" hơn, bạn có thể gói nó như thế này:

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

Sau đó bạn có thể gọi nó như thế này:

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

Tôi đã chạy qua câu hỏi này và tôi nghĩ rằng tôi sẽ cung cấp một bản cập nhật về chủ đề này. jQuery (v1.5 +) bao gồm một Deferredmô hình, (mặc dù không tuân thủ Promise / A spec cho đến khi jQuery 3) thường được coi là một cách rõ ràng hơn để tiếp cận nhiều vấn đề không đồng bộ. $.wait()Tôi tin rằng việc thực hiện một phương pháp sử dụng phương pháp này đặc biệt dễ đọc:

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

Và đây là cách bạn có thể sử dụng nó:

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

Tuy nhiên, nếu sau khi tạm dừng, bạn chỉ muốn thực hiện các hành động trên một lựa chọn jQuery, thì bạn nên sử dụng nguồn gốc của jQuery .delay()mà tôi tin rằng cũng sử dụng Deferred's trong trình duyệt:

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

setTimeout(function(){


},5000); 

Đặt mã của bạn bên trong { }

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

Vân vân.

Đã sử dụng lớp này cho lớp phủ tin nhắn có thể được đóng ngay lập tức khi nhấp hoặc nó sẽ tự động hiển thị sau 10 giây.

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

Các thư viện gạch cũng cung cấp một "chậm trễ" chức năng:

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

Dựa trên câu trả lời của Joey, tôi đã đưa ra một giải pháp dự định (của jQuery, đọc về 'queue').

Nó phần nào tuân theo cú pháp jQuery.animate () - cho phép kết nối với các hàm fx khác, hỗ trợ 'chậm' và các jQuery.fx.speed khác cũng như là jQuery hoàn toàn. Và sẽ được xử lý giống như hoạt hình, nếu bạn dừng chúng.

Mặt bằng thử nghiệm jsFiddle với nhiều công dụng hơn (như hiển thị .stop ()), có thể được tìm thấy ở đây .

cốt lõi của giải pháp là:

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

toàn bộ dưới dạng plugin, hỗ trợ sử dụng $ .wait () và $ (..). 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>

Lưu ý: vì chờ thêm vào ngăn xếp hoạt hình, $ .css () được thực thi ngay lập tức - vì nó được cho là: hành vi jQuery dự kiến.

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

Nhận ra rằng đây là một câu hỏi cũ, nhưng tôi đã viết một plugin để giải quyết vấn đề này mà ai đó có thể thấy hữu ích.

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

cho phép bạn làm điều này:

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