Як чекати 5 секунд з jQuery?

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

Як я можу цього досягти?

Вбудований javascript setTimeout .

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

ОНОВЛЕННЯ : потрібно чекати з моменту закінчення завантаження сторінки, тому введіть цей код у свій $(document).ready(...);сценарій.

ОНОВЛЕННЯ 2 : .delayметод 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: У відповідь на коментар ОП із запитанням, чи є спосіб зробити це у jQuery, а не використовувати setTimeoutвідповідь - ні. Але якщо ви хотіли зробити його більш "jQueryish", ви можете обернути це так:

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

Потім ви можете назвати це так:

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

Я зіткнувся з цим питанням і думав, що надам оновлення на цю тему. jQuery (v1.5 +) включає Deferredмодель, яка (незважаючи на те, що вона не дотримується Обітувань / Спеціалізації до 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();

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

тощо.

Використовували це для накладання повідомлення, яке можна закрити негайно при натисканні, або воно автоматично закриється через 10 секунд.

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

Бібліотека підкреслення також забезпечує функцію "затримки":

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

Виходячи з відповіді Джої, я придумав рішення (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>

Примітка: оскільки очікування додає до анімаційного стеку, $ .css () виконується негайно - як передбачається: очікувана поведінка jQuery.

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

Зрозумійте, що це старе питання, але я написав плагін, щоб вирішити цю проблему, щоб хтось міг вважати корисним.

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

дозволяє вам це зробити:

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