Как ждать 5 секунд с jQuery?

272

Я пытаюсь создать эффект, когда страница загружается, и через 5 секунд сообщение об успешном завершении на экране исчезает или скользит вверх.

Как я могу это достичь?

Теги:

8 ответов

556
Лучший ответ

Встроенный javascript setTimeout.

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

UPDATE: вы хотите подождать, когда страница закончит загрузку, поэтому введите этот код внутри $(document).ready(...); script.

ОБНОВЛЕНИЕ 2: jQuery 1.4.0 представил метод .delay. Проверьте это. Обратите внимание, что .delay работает только с очередями эффектов jQuery.

  • 2
    Есть ли в jQuery что-то, что вы можете использовать вместо setTimeout?
  • 34
    JQuery написан на JavaScript. Если вы включаете и используете jQuery, вам нужен javascript. Если у вас есть JavaScript, у вас есть setTimeout .
Показать ещё 8 комментариев
46

Использовать обычный таймер 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);
31

Я столкнулся с этим вопросом, и я подумал, что дам обновление по этой теме. jQuery (v1.5 +) включает в себя модель Deferred, которая (несмотря на то, что не придерживается Promises/A до jQuery 3) обычно рассматривается как более четкий способ подхода ко многим асинхронным проблемам. Реализация метода $.wait() с использованием этого подхода особенно читаема, я полагаю:

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

И вот как вы можете его использовать:

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

Однако, если после паузы вы хотите выполнять действия только для одного выбора jQuery, тогда вы должны использовать jQuery native .delay() который, я считаю, также использует Отложенные под капотом:

$(".my-element").delay(5000).fadeIn();
  • 1
    Ян Кларк - это супер потрясающее решение! Мне это очень нравится, и я буду использовать его в своих проектах. Спасибо!
  • 0
    Это легко читать и понимать. Спасибо.
10
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

и т.д..

  • 5
    Чем это отличается от принятого ответа ?
  • 2
    форматирование / синтаксис, и это дает больше разъяснений по времени.
10

Использовали этот вариант для наложения сообщений, которые можно сразу закрыть при щелчке или автоклинировать через 10 секунд.

button = $('.status-button a', whatever);
if(button.hasClass('close')) {
  button.delay(10000).queue(function() {
    $(this).click().dequeue();
  });
}
  • 0
    +10, это должен быть правильный ответ, .delay() и он может быть вложенным
8

Библиотека поддеревьев также предоставляет функцию "delay":

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

Основываясь на ответе Джо, я придумал предполагаемое (по 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.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.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню