Comment attendre 5 secondes avec jQuery ?

Question

J'essaie de créer un effet où la page se charge, et après 5 secondes, le message de succès sur l'écran s'efface, ou glisse vers le haut.

Comment puis-je y parvenir ?

Answer 1

Construit en javascript setTimeout .

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

UPDATE vous voulez attendre que la page ait fini de se charger, mettez donc ce code à l'intérieur de votre fichier $(document).ready(...); script.

MISE À JOUR 2 jquery 1.4.0 a introduit l'option .delay méthode. Consultez le site . Notez que .delay ne fonctionne qu'avec les files d'attente d'effets jQuery.

Answer 2

Utilisez un minuteur javascript normal :

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

Cela attendra 5 secondes après que le DOM soit prêt. Si vous voulez attendre jusqu'à ce que la page soit effectivement loaded vous devez utiliser ceci :

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

EDIT : En réponse au commentaire de l'OP demandant s'il y a un moyen de le faire dans jQuery et de ne pas utiliser setTimeout la réponse est non. Mais si vous vouliez le rendre plus "jQuery", vous pourriez l'envelopper comme ceci :

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

Vous pourriez alors l'appeler comme ceci :

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

Answer 3

J'ai rencontré cette question et j'ai pensé faire le point sur ce sujet. jQuery (v1.5+) comprend une fonction Deferred modèle, qui (bien que n'adhérant pas à la Promesses/A spec jusqu'à jQuery 3) est généralement considéré comme une manière plus claire d'aborder de nombreux problèmes asynchrones. L'implémentation d'un $.wait() utilisant cette approche est particulièrement lisible je crois :

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

Et voici comment vous pouvez l'utiliser :

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

Toutefois, si, après avoir fait une pause, vous ne souhaitez effectuer des actions que sur une seule sélection jQuery, vous pouvez alors devrait utiliser la fonction native de jQuery .delay() qui, je crois, utilise également les différés sous le capot :

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

Answer 4

J'ai utilisé celui-ci pour un message superposé qui peut être fermé immédiatement après un clic ou qui se ferme automatiquement après 10 secondes.

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

Answer 5

El Bibliothèque Underscore offre également une fonction "retard" :

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