Wie kann ich mit jQuery 5 Sekunden warten?

Ich versuche, einen Effekt zu erzielen, bei dem die Seite geladen wird. Nach 5 Sekunden wird die Erfolgsmeldung auf dem Bildschirm ausgeblendet oder nach oben verschoben.

Wie kann ich das erreichen?

Eingebautes Javascript setTimeout .

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

UPDATE : Sie möchten warten, bis die Seite vollständig geladen ist. Fügen Sie diesen Code in Ihr $(document).ready(...);Skript ein.

UPDATE 2 : jquery 1.4.0 führte die .delayMethode ein. Schau es dir an . Beachten Sie, dass .delay nur mit den jQuery-Effektwarteschlangen funktioniert.

Verwenden Sie einen normalen Javascript-Timer:

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

Dies wartet 5 Sekunden, nachdem das DOM bereit ist. Wenn Sie warten möchten, bis die Seite tatsächlich loadedangezeigt wird, müssen Sie Folgendes verwenden:

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

BEARBEITEN: Als Antwort auf den Kommentar des OP lautet die Frage, ob es eine Möglichkeit gibt, dies in jQuery zu tun und setTimeoutdie Antwort nicht zu verwenden , Nein. Aber wenn Sie es "jQueryish" machen wollten, könnten Sie es so einpacken:

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

Man könnte es dann so nennen:

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

Ich bin auf diese Frage gestoßen und dachte, ich würde ein Update zu diesem Thema bereitstellen. jQuery (v1.5 +) enthält ein DeferredModell, das (obwohl es sich bis jQuery 3 nicht an die Promises / A- Spezifikation hält) allgemein als klarere Möglichkeit zur Lösung vieler asynchroner Probleme angesehen wird. Die Implementierung einer $.wait()Methode mit diesem Ansatz ist meiner Meinung nach besonders lesbar:

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

Und so können Sie es verwenden:

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

Wenn Sie jedoch nach dem Anhalten nur Aktionen für eine einzelne jQuery-Auswahl ausführen möchten, sollten Sie jQuerys native verwenden, von .delay()der ich glaube, dass sie auch Deferreds unter der Haube verwendet:

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

setTimeout(function(){


},5000); 

Platzieren Sie Ihren Code in der { }

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

usw.

Ich habe dieses für eine Nachrichtenüberlagerung verwendet, die sofort beim Klicken geschlossen werden kann, oder es wird nach 10 Sekunden automatisch geschlossen.

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

Die Unterstreichungsbibliothek bietet auch eine "Verzögerungs" -Funktion:

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

Basierend auf Joeys Antwort habe ich eine beabsichtigte Lösung gefunden (von jQuery, lesen Sie über 'Warteschlange').

Es folgt etwas der Syntax jQuery.animate () - ermöglicht die Verkettung mit anderen FX-Funktionen, unterstützt 'slow' und andere jQuery.fx.speeds und ist vollständig jQuery. Und wird genauso behandelt wie Animationen, wenn Sie diese stoppen.

jsFiddle-Testgelände mit mehr Verwendungszwecken (wie das Vorführen von .stop ()) finden Sie hier .

Der Kern der Lösung ist:

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

das Ganze als Plugin, das die Verwendung von $ .wait () und $ (..) unterstützt. 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>

Hinweis: Da wait zum Animationsstapel hinzugefügt wird, wird $ .css () sofort ausgeführt - wie angenommen: erwartetes jQuery-Verhalten.

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

Erkenne, dass dies eine alte Frage ist, aber ich habe ein Plugin geschrieben, um dieses Problem zu beheben, das jemand nützlich finden könnte.

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

können Sie dies tun:

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