Как подождать 5 секунд с jQuery?
Я пытаюсь создать эффект, когда страница загружается и через 5 секунд сообщение на экране исчезает, и скользит вверх.
Как я могу этого достичь?
8 ответов
встроенный javascript setTimeout.
setTimeout(
function()
{
//do something special
}, 5000);
обновление: вы хотите подождать с момента завершения загрузки страницы, поэтому поместите этот код в свой $(document).ready(...);
сценарий.
обновление 2: jquery 1.4.0 представил .delay
метод. зацените. Заметить что. задержка работает только с очередями эффектов jQuery.
используйте обычный таймер javascript:
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
это подождет 5 секунд после того, как DOM будет готов. Если вы хотите подождать, пока страница на самом деле loaded
вам нужно использовать это:
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
EDIT: в ответ на комментарий OP, спрашивающий, есть ли способ сделать это в jQuery и не использовать setTimeout
ответа нет. Но если вы хотите сделать его более "jQueryish", вы можете обернуть его так:
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
вы можете назвать это как это:
$.wait( function(){ $("#message").slideUp() }, 5);
я столкнулся с этим вопросом, и я подумал, что предоставлю обновление по этой теме. jQuery (v1.5+) включает в себя Deferred
модель,(несмотря не придерживаясь Обещания / A spec до jQuery 3) обычно рассматривается как более четкий способ подхода ко многим асинхронным проблемам. Реализации $.wait()
метод, использующий этот подход, особенно читаем, Я считаю:
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
и вот как вы можете использовать это:
$.wait(5000).then(disco);
однако, если после паузы вы хотите выполнить действия только для одного выбора jQuery, то вы должны используйте родной jQuery .delay()
который, я считаю, также использует отложенные под капотом:
$(".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
etc.
использовал этот один для наложения сообщений, которые могут быть немедленно закрыты по щелчку или это делает автозакрытие через 10 секунд.
button = $('.status-button a', whatever);
if(button.hasClass('close')) {
button.delay(10000).queue(function() {
$(this).click().dequeue();
});
}
на библиотеку Underscore также обеспечивает "задержку":
_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');
основываясь на ответе Джоуи, я придумал предполагаемое (по jQuery, читайте о "очереди") решение.
это несколько следует за jQuery.синтаксис animate () - позволяет связываться с другими функциями fx, поддерживает "slow" и другие jQuery.fx.скорости, а также полностью 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>
в целом как плагин, поддерживающий использование $.ждать и.($ .).подождите ():
// 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.