file d'attente jquery et imitation native de sa méthode d'implémentation Sharing_jquery

La méthode

queue() affiche ou opère sur une file d'attente de fonctions exécutées sur des éléments correspondants.

Les processus de file d'attente et de sortie de file d'attente sont principalement :

Utilisez queue pour ajouter la fonction à la file d'attente (généralement un tableau de fonctions)
Utilisez dequeue pour retirer la première fonction du tableau de fonctions et l'exécuter (utilisez la méthode shift() pour la retirer et l'exécuter )
Cela signifie que lorsque la suppression de la file d'attente est à nouveau exécutée, une autre fonction est obtenue. Cela signifie également que si la suppression de la file d'attente n'est pas exécutée, la fonction suivante dans la file d'attente ne sera jamais exécutée.

Pour exécuter la méthode animate et l'animation sur un élément, jQuery l'ajoutera également à la file d'attente de fonctions nommée fx en interne. Pour que plusieurs éléments soient animés en séquence, nous devons définir manuellement la file d'attente.

Un exemple pour déplacer deux divs vers la gauche en séquence :

Copiez le code Le code est le suivant :

div 1

div 2

> ;

J'ai d'abord créé un tableau de fonctions, qui contient une série d'animations qui doivent être exécutées en séquence
Ensuite, j'ai défini une fonction de rappel et utilisé la méthode dequeue pour exécuter la fonction suivante dans la file d'attente
Ensuite, j'ai ajouté cette fonction Le tableau est placé dans la file d'attente de myAnimation sur le document (vous pouvez sélectionner n'importe quel élément, je viens de mettre cette file d'attente sur le document pour plus de commodité)
Enfin je commence à exécuter la première fonction de la file d'attente
Le avantages de ceci La raison est que le tableau de fonctions est étendu de manière linéaire, ce qui rend son augmentation ou sa diminution très pratique. De plus, lorsque vous ne souhaitez plus continuer l'animation suivante (par exemple, l'utilisateur clique sur un certain bouton), il vous suffit de vider la file d'attente. Pour en ajouter davantage, rejoignez simplement la file d’attente.

Copier le code Le code est le suivant :

//Effacer la file d'attente
$ (document). queue("myAnimation",[]);
//Ajouter une nouvelle fonction à la fin
$(document).queue("myAnimation",function(){alert("L'animation est vraiment fini !")});

Bien sûr, cela peut également être utilisé pour des méthodes comme ajax. Si une série d'interactions ajax est requise, chaque ajax veut démarrer après la fin de la précédente. La méthode la plus originale auparavant était d'utiliser une fonction de rappel, mais c'est le cas. trop gênant. Utilisez également queue pour ajouter une file d'attente et exécutez dequeue une fois dans le rappel après chaque ajax.

Implémentation en file d'attente de l'animation animate dans jQuery, ce qui suit est utilisé pour en imiter une en JavaScript :

Copier le code Le code est comme suit :

function Queue(){
this.a = [];
this.t = null;
}
Queue.prototype = {
queue:function(s) {
var self = this;
this.a.push(s);
this.hold();
return this;
},
hold:function(){
var self = this;
clearTimeout(this.t);
this.t = setTimeout(function(){
console.log("Démarrage de la file d'attente ! " ,self.a);
self.dequeue();
},0);
},
dequeue:function(){
var s = this.a.shift() ,self = this;
if(s){
console.log("s:" s);
setTimeout(function(){
console.log("end:" s);
self.dequeue( );
},s);
}
}
};
var a = new Queue().queue(500).queue(200) .queue(400).queue (1500).queue(300).queue(2000);