如何使用jQuery等待5秒？

Question

我正在尝试创建页面加载的效果,并在5秒后,屏幕上的成功消息淡出或向上滑动.

我怎样才能做到这一点？

Answer 1

内置javascript setTimeout.

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

更新:您希望等待页面加载完成后,将代码放入$(document).ready(...);脚本中.

更新2:jquery 1.4.0介绍了该.delay方法.看看吧.请注意,.delay仅适用于jQuery特效队列.

Answer 2

使用普通的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);

Answer 3

我遇到了这个问题,我想我会提供有关此主题的更新.jQuery(v1.5 +)包含一个Deferred模型,它(尽管不遵守Promise/A规范,直到jQuery 3) 通常被认为是一种更清晰的方法来处理许多异步问题.$.wait()使用这种方法实现方法特别易读:我相信:

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

以下是如何使用它:

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

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

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

Answer 4

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

等等

Answer 5

一直使用这个消息覆盖,可以在点击时立即关闭,或者在10秒后自动关闭.

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

Answer 6

该下划线库还提供了"延迟"功能:

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

Answer 7

基于乔伊的答案，我想出了一个预期的解决方案（通过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行为。