Jak czekać 5 sekund z jQuery?

Próbuję stworzyć efekt, w którym strona się ładuje, a po 5 sekundach komunikat o powodzeniu na ekranie znika lub przesuwa się w górę.

Jak mogę to osiągnąć?

Wbudowany javascript setTimeout .

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

AKTUALIZACJA : chcesz poczekać, aż strona się załaduje, więc umieść ten kod w $(document).ready(...);skrypcie.

AKTUALIZACJA 2 : jquery 1.4.0 wprowadziło tę .delaymetodę. Sprawdź to . Zauważ, że .delay działa tylko z kolejkami efektów jQuery.

Użyj normalnego timera javascript:

$(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
});

Poczeka to 5 sekund po zakończeniu DOM. Jeśli chcesz poczekać, aż strona rzeczywiście się pojawi, loadedmusisz użyć tego:

$(window).load(function(){
   function show_popup(){
      $("#message").slideUp();
   };
   window.setTimeout( show_popup, 5000 ); // 5 seconds
})

EDYCJA: W odpowiedzi na komentarz PO pytając, czy istnieje sposób, aby to zrobić w jQuery i nie używać setTimeoutodpowiedzi, nie. Ale jeśli chcesz uczynić go bardziej „jQueryish”, możesz go zawinąć w następujący sposób:

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

Możesz to nazwać tak:

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

Natknąłem się na to pytanie i pomyślałem, że przedstawię aktualizację na ten temat. jQuery (wersja 1.5 +) zawiera Deferredmodel, który (pomimo nieprzestrzegania specyfikacji Promises / A aż do jQuery 3) jest ogólnie uważany za wyraźniejszy sposób podejścia do wielu problemów asynchronicznych. Wdrożenie $.wait()metody wykorzystującej to podejście jest szczególnie czytelne:

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

A oto jak możesz go użyć:

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

Jeśli jednak po wstrzymaniu chcesz wykonywać akcje tylko na jednym zaznaczeniu jQuery, powinieneś używać natywnego jQuery, .delay()który, jak sądzę, również używa opcji Odroczony pod maską:

$(".my-element").delay(5000).fadeIn();

setTimeout(function(){


},5000); 

Umieść swój kod wewnątrz { }

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

itp.

Używam tego do nakładki wiadomości, którą można zamknąć natychmiast po kliknięciu lub wykonuje automatyczne zamykanie po 10 sekundach.

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

Biblioteka Podkreślenie oferuje również funkcję „opóźnienie”:

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

Na podstawie odpowiedzi Joeya wpadłem na zamierzone (przez jQuery, czytaj o „kolejce”) rozwiązanie.

Jest nieco zgodny ze składnią jQuery.animate () - pozwala łączyć się z innymi funkcjami fx, obsługuje „slow” i inne jQuery.fx.speeds, a także jest w pełni jQuery. I będą obsługiwane tak samo jak animacje, jeśli je zatrzymasz.

Pole testowe jsFiddle z większą ilością zastosowań (np. popisywanie .stop ()), można znaleźć tutaj .

rdzeniem rozwiązania jest:

$('<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>

całość jako wtyczka, obsługująca użycie $ .wait () i $ (..). 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>

Uwaga: ponieważ czekanie dodaje się do stosu animacji, $ .css () jest wykonywany natychmiast - jak się zakłada: oczekiwane zachowanie jQuery.

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

Zdaj sobie sprawę, że to stare pytanie, ale napisałem wtyczkę, aby rozwiązać ten problem, który może być przydatny dla kogoś.

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

pozwala ci to zrobić:

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