Wie warten Sie 5 Sekunden mit jQuery?

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

Wie kann ich das erreichen?

   

Errichtet in Javascript setTimeout .

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

UPDATE : Sie wollen warten, seit die Seite fertig $(document).ready(...); ist, also $(document).ready(...); diesen Code in Ihr $(document).ready(...); Skript.

UPDATE 2 : jquery 1.4.0 führte die Methode .delay . Schau es dir an . Beachten Sie, dass .delay nur mit den Warteschlangen für jQuery-Effekte funktioniert.

Verwenden Sie einen normalen JavaScript-Timer:

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

Dies wird 5 Sekunden warten, nachdem das DOM bereit ist. Wenn Sie warten möchten, bis die Seite tatsächlich loaded , 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 OP-Kommentar, der fragt, ob es eine Möglichkeit gibt, dies in jQuery zu tun und setTimeout nicht zu verwenden, setTimeout die Antwort nein. Aber wenn du es “jQueryish” machen willst, könntest du es so verpacken:

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

Du könntest es dann so nennen:

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

Ich bin über diese Frage gestolpert und dachte, ich würde ein Update zu diesem Thema liefern. jQuery (v1.5 +) enthält ein Deferred Modell, das (trotz der Nichteinhaltung der Promises / A- Spezifikation bis jQuery 3) allgemein als eine klarere Methode angesehen wird, viele asynchrone Probleme anzugehen. Die Implementierung einer $.wait() Methode mit diesem Ansatz ist besonders lesenswert, glaube ich:

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

Und so können Sie es nutzen:

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

Wenn Sie jedoch nach einer Pause nur Aktionen für eine einzige jQuery-Auswahl ausführen möchten, sollten Sie die native .delay() von jQuery verwenden, die meiner Meinung nach auch Deferreds unter der Haube verwendet:

 $(".my-element").delay(5000).fadeIn(); 
 setTimeout(function(){ },5000); 

Fügen Sie Ihren Code in { }

 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.

Verwenden Sie diese Option für eine Nachrichtenüberlagerung, die sofort nach dem Klicken geschlossen werden kann oder nach 10 Sekunden automatisch schließt.

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

Die Underscore-Bibliothek bietet auch eine “Verzögerung” -function:

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

Basierend auf Joey’s Antwort, kam ich auf eine (von jQuery, lesen Sie über ‘Warteschlange’) Lösung.

Es folgt ein wenig der jQuery.animate () -Syntax – erlaubt es, mit anderen fx-functionen verkettet zu werden, unterstützt ‘langsame’ und andere jQuery.fx.speeds sowie vollständig jQuery. Und wird genauso behandelt wie Animationen, wenn Sie diese stoppen.

jsFiddle Test Ground mit mehr Nutzungen (wie Angeber. Stop ()), finden Sie hier .

Der core der Lösung ist:

 $('') .delay(100 /*ms*/) .queue( (next) => { $('#result').text('done.'); next(); } ); 
  
 $( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );