Actions en file d'attente (pas d'effets) à exécuter après un certain temps.

Question

Ce que je voudrais savoir, c'est s'il y a un bon moyen de mettre en file d'attente les fonctions de jQuery à exécuter après un certain laps de temps. Cela ne mettrait pas en pause l'exécution des autres fonctions, juste celles qui suivent dans la chaîne. Peut-être un exemple de ce que je prévois que cela ressemblerait illustrerait:

$('#alert') 
    .show() 
    .wait(5000) // <-- this bit 
    .hide() 
; 

Je sais qu'il est possible en utilisant les délais d'attente, mais il semble que c'est une façon désordonnée de le faire, en particulier par rapport à l'exemple ci-dessus (si c'était réel).

Donc, quelque chose comme ça est déjà intégré à jQuery, et si non, quelle est la meilleure façon de l'émuler?

Answer 1

Vous ne pouvez pas faire cela, et vous ne voulez probablement pas. Bien que cela semble très joli, il n'y a pas de mécanisme en Javascript qui permette de faire ça sans attendre que le temps soit écoulé. Vous pouvez certainement le faire, mais vous risquez sérieusement de dégrader les performances du navigateur et si votre délai d'attente est plus long que quelques secondes, les navigateurs afficheront un avertissement à l'utilisateur que votre javascript semble être bloqué.

La bonne façon de le faire est avec les délais d'attente:

var el = $('#alert'); 
el.show() 
setTimeout(function() { el.hide() }, 5000); 

Votre autre option serait d'étendre jquery ajouter essentiellement un effet pour les actions que vous voulez retarder:

jQuery.fn.extend({ 
    delayedHide: function(time) { 
     var self = this; 
     setTimeout(function() { self.hide(); }, time); 
    } 
}); 

$('#alert') 
    .show() 
    .delayedHide(5000) 
; 

Vous pourriez étendre également jquery avec un procédé similaire à setTimeout:

jQuery.fn.extend({ 
    delayThis: function(fn, time, args) { 
     var self = this; 
     setTimeout(function() { jQuery.fn[fn].apply(self, args); }, time); 
    } 
}); 

$('#alert') 
    .show() 
    .delayThis('hide', 5000) 
; 

ou à appeler avec ar gs passer des arguments dans un tableau:

$('#alert') 
    .show() 
    .delayThis('css', 5000, [ 'display', 'none' ]) 
; 

Answer 2

Le jQuery FxQueues plug-in fait exactement ce que vous avez besoin:

$('#element').fadeOut({ 
    speed: 'fast', 
    preDelay: 5000 
});