如何用jQuery等待5秒?

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

我怎样才能做到这一点呢?

1339912 次浏览
小开
最佳答案

内置javascript setTimeout。

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

更新:你想在页面加载完成后等待，所以把代码放在你的$(document).ready(...);脚本中。

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，答案是没有。但如果你想让它更“jquery”，你可以这样包装它:

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

然后你可以这样调用它:

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

强调图书馆还提供了一个"delay"函数:

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

一直在使用这一个消息覆盖，可以立即关闭点击或它在10秒后自动关闭。

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

我遇到了这个问题，我想我应该就这个话题提供一个更新。jQuery (v1.5+)包含一个Deferred模型，其中(尽管没有遵循Promises/A spec until jQuery 3)通常被认为是解决许多异步问题的更清晰的方法。我认为，使用这种方法实现$.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

等。

小开

基于Joey的回答，我提出了一个有意的(通过jQuery，阅读“队列”)解决方案。

它在一定程度上遵循了jQuery.animate()语法-允许与其他fx函数链接，支持'slow'和其他jQuery.fx.speed以及完全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>

注意:因为等待添加到动画堆栈，$.css()立即执行-因为它被认为:预期的jQuery行为。

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

我知道这是一个老问题，但这里有一个解决这个问题的插件，有人可能会觉得有用。

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

让你这样做:

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

你应该使用.wait而不是.delay的原因是因为不是所有的jquery函数都被.delay支持，而且.delay只适用于动画函数。例如，delay不支持.addClass和.removeClass

或者你可以用这个函数代替。

function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}


sleep(5000);
小开

使用aynsc/await可以快速简单地延迟:

await $(window).delay(5000).promise();

提交答案