Wie kann man mit jQuery 5 Sekunden warten?

Question

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

Wie kann ich das erreichen?

Answer 1

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

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

Answer 2

Basierend auf Joey's Antwort, kam ich mit einer beabsichtigten (von jQuery, lesen Sie über "Warteschlange") Lösung.

Es folgt ein wenig der jQuery.animate()-Syntax - erlaubt es, mit anderen fx-Funktionen verkettet zu werden, unterstützt 'slow' und andere jQuery.fx.speeds sowie vollständig jQuery zu sein. Und wird auf die gleiche Weise wie Animationen behandelt werden, wenn Sie diese zu stoppen.

jsFiddle-Testgelände mit weiteren Einsatzmöglichkeiten (wie z.B. .stop()), finden Sie hier aquí .

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 $(..).wait() unterstützt:

// 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>

Anmerkung: da wait dem Animationsstapel hinzugefügt wird, wird $.css() sofort ausgeführt - wie es vorgesehen ist: erwartetes jQuery-Verhalten.

Answer 3

Ich weiß, dass dies eine alte Frage ist, aber hier ist ein Plugin für dieses Problem, das jemand nützlich finden könnte.

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

können Sie dies tun:

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

Der Grund, warum Sie Folgendes verwenden sollten .wait anstelle von .delay ist, weil nicht alle Jquery-Funktionen von .delay で、その .delay funktioniert nur mit Animationsfunktionen. Zum Beispiel unterstützt Delay nicht .addClass y .removeClass

Oder Sie können stattdessen diese Funktion verwenden.

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

sleep(5000);

Answer 4

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

Answer 5

Für eine schnelle und einfache Verzögerung mit aynsc/await können Sie dies tun:

await $(window).delay(5000).promise();