如何使用jQuery等待5秒钟？

我正在尝试创建一种加载页面的效果，并在5秒钟后，屏幕上的成功消息消失或向上滑动。

我该如何实现？

内置javascript setTimeout。

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

更新：自页面加载完成后，您要等待，因此请将代码放入$(document).ready(...);脚本中。

更新2：jquery 1.4.0引入了该.delay方法。检查一下。请注意，.delay仅适用于jQuery效果队列。

使用普通的JavaScript计时器：

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

DOM准备就绪后，将等待5秒钟。如果要等到页面实际显示loaded，则需要使用以下命令：

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

编辑：在回答OP的评论询问是否有一种方法可以在jQuery中而不使用setTimeout答案是否定的。但是，如果您想使其更加“ jQueryish”，则可以将其包装如下：

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

然后可以这样称呼它：

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

我遇到了这个问题，我想提供有关此主题的最新信息。jQuery（v1.5 +）包括一个Deferred模型，该模型（尽管直到jQuery 3才遵守Promises / A规范） 通常被认为是解决许多异步问题的更清晰方法。$.wait()我相信使用这种方法来实现一种方法特别容易阅读：

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

这是如何使用它：

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

但是，如果在暂停之后，您只希望对单个jQuery选择执行操作，那么您应该使用jQuery的本机.delay()，我相信它也会在后台使用Deferred的：

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

setTimeout(function(){


},5000); 

将您的代码放在 { }

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

等等

一直使用此消息进行覆盖，单击可立即关闭它，或者10秒钟后自动关闭。

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

该下划线库还提供了“延迟”功能：

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

基于乔伊的答案，我想出了一个预期的解决方案（由jQuery，阅读有关“队列”的信息）。

它在某种程度上遵循jQuery.animate（）语法-允许与其他fx函数链接，支持“慢速”和其他jQuery.fx.speeds以及完全的jQuery。如果您停止了动画，并且将以与动画相同的方式进行处理。

可以在这里找到更多用法的jsFiddle测试平台（例如炫耀.stop（））。

解决方案的核心是：

$('<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（）和$（..）。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>

注意：由于wait添加到动画堆栈中，因此$ .css（）立即执行-如预期的那样：预期的jQuery行为。

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

意识到这是一个古老的问题，但是我写了一个插件来解决这个问题，有人可能会觉得有用。

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

让您执行以下操作：

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