如何使用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模型，该模型（尽管直到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();