La différence d'utilisation entre la file d'attente et la suppression de la file d'attente dans jQuery

queue et dequeue dans jQuery sont un ensemble de méthodes très utiles. Elles sont particulièrement utiles pour une série de fonctions qui doivent être exécutées dans l'ordre. Surtout animeranimation, ajax et timeout et d'autres fonctions qui nécessitent un certain temps

les processus de mise en file d'attente et de retrait sont principalement :
Utilisez la file d'attente pour ajouter la fonction au. file d'attente (généralement un tableau de fonctions)
2, 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)

ce qui signifie que lorsqu'elle est à nouveau exécutée Lors de la sortie de la file d'attente, vous obtenez une autre fonction
Cela signifie également que si la sortie 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 le méthode animate et animation sur un élément, jQuery l'ajoutera également en interne à la file d'attente de fonctions nommée fx
Pour effectuer des animations sur plusieurs éléments 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, cliquez ici pour voir

 div {
 background:#aaa;
 width:18px;
 height:18px;
 position:absolute;
 top:10px;
 }　

Si vous n'avez besoin que de vous relayer pour vous déplacer un petit nombre de fois, vous pouvez utiliser l'animation Fonction de rappel Pour ce faire, placez une animation dans le rappel d'une autre animation
telle que

 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function() {
 $(“#block2″).animate({left:”+=100″},function() {
 $(“#block1″).animate({left:”+=100″},function(){
 alert(“动画结束”);
 });
 });
 });
 });
 });

Mais cette méthode est tout simplement cruelle lorsqu'il y a beaucoup d'animations.

Il est beaucoup plus simple d'utiliser queue et dequeue à ce stade :

var FUNC=[
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function() {$("#block2").animate({left:"+=100"},aniCB);},
 function() {$("#block1").animate({left:"+=100"},aniCB);},
 function(){alert("动画结束")}
 ];
 var aniCB=function() {
 $(document).dequeue(“myAnimation”);
 }
 $(document).queue(“myAnimation”,FUNC);
 aniCB();　　

1 Je suggère d'abord de créer un tableau de fonctions, qui contient une série d'animations qui doivent le faire. être exécuté en séquence
2, puis j'ai défini une fonction de rappel, en utilisant la méthode dequeue pour exécuter la fonction suivante dans la file d'attente
3, puis j'ai mis ce tableau de fonctions dans la file d'attente de myAnimation sur le document (vous pouvez sélectionnez n'importe quel élément, je mets simplement cette file d'attente sur le document pour plus de commodité)
4, enfin j'ai commencé à exécuter la première fonction de la file d'attente

L'avantage est que le tableau de fonctions est étendu linéairement, et il est très pratique d'augmenter ou de diminuer.
De plus, lorsque vous ne souhaitez plus continuer avec l'animation suivante (par exemple, l'utilisateur clique sur un certain bouton), il vous suffit de vider la file d'attente. Pour en ajouter, il vous suffit de rejoindre la file d'attente

 //清空队列
 $(document).queue(“myAnimation”,[]);
 //加一个新的函数放在最后
 $(document).queue(“myAnimation”,function(){alert(“动画真的结束了！”)});

J'ai déjà posté un plug-in d'attente, qui sert à mettre les animations en pause pendant un certain temps

Vous pouvez prendre un regardez, il a aussi Ce principe est utilisé pour insérer un timeout dans fx par défaut et le mettre dans la file d'attente ne sera pas exécuté tant que le timeout n'est pas écoulé pour continuer à exécuter la fonction suivante dans la file d'attente.

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 trop problématique. Utilisez également queue pour ajouter une file d'attente et exécutez dequeue une fois dans le rappel après chaque ajax.

Si vous n'utilisez pas la bibliothèque jQuey, vous pouvez également écrire vous-même un code simple pour résoudre ce problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!