Explication détaillée des méthodes de contrôle de file d'attente jQuery queue()/dequeue()/clearQueue()

Au cœur de

jQuery, il existe un ensemble de méthodes de contrôle queue Cet ensemble de méthodes se compose de trois méthodes : queue()/dequeue()/clearQueue(). .Le contrôle des fonctions exécutées séquentiellement peut être considéré comme concis et simple. Il est principalement utilisé dans la méthode animate (), ajax et d'autres événements qui doivent être exécutés dans l'ordre chronologique. 🎜> Expliquons d'abord cet ensemble de méthodes Leurs significations respectives.

queue(name,[callback]):
Lorsqu'un seul paramètre est passé, il renvoie et pointe vers la file d'attente du premier correspondant élément (qui sera un tableau de fonctions, nom de file d'attente La valeur par défaut est fx); lorsque deux paramètres sont transmis, le premier paramètre est toujours par défaut le nom de file d'attente de fx et le deuxième paramètre est divisé en deux situations. Le paramètre est une fonction, il sera dans Une fonction est finalement ajoutée à la file d'attente des éléments correspondants. Lorsque le deuxième paramètre est un tableau de fonctions, il remplacera la file d'attente des éléments correspondants par une nouvelle file d'attente (tableau de fonctions). est un peu déroutant à comprendre. Plus tard, vous verrez la DÉMO plus tard.

dequeue(name):

C'est facile à comprendre, il s'agit de supprimer une fonction de file d'attente de l'avant de la file d'attente et exécutez-la.clearQueue ([queueName]):
Il s'agit d'une nouvelle méthode ajoutée en 1.4 Effacez toutes les files d'attente qui n'ont pas encore été exécutées sur l'objet. Les paramètres sont facultatifs et la valeur par défaut est fx. Cependant, je pense personnellement que cette méthode n'est pas très utile, donc utilisez la méthode clearQueue peut être implémentée en passant le deuxième paramètre des deux paramètres à la méthode queue() Maintenant, nous voulons obtenir un tel effet. Il y a des carrés numériques marqués de 1 à 7, et ces sept carrés doivent être disposés de gauche à Cliquez ici pour voir la DÉMO

Je ne publierai pas les parties css et html, elles sont incluses dans la DÉMO Si vous cliquez sur Conventionnellement, vous devrez peut-être utiliser le code jQ suivant pour y parvenir :

Bon oui, l'effet est parfaitement présenté, mais ce genre de Code étourdi, peux-tu le supporter Même si tu peux le supporter, et si tu veux changer un ? certain ordre d'exécution à ce moment-là, par exemple, vous voulez que 5 tombe avant de commencer à tomber 3, ou ajouter huit nouveaux blocs de 8 à 15, que devez-vous faire ? nous avons besoin d'une autre méthode concise et pratique pour obtenir cet effet, c'est-à-dire la méthode de contrôle de file d'attente jQuery. Veuillez consulter le code suivant :

$('.one').delay(500).animate({top:'+=270px'},500,function(){
		$('.two').delay(500).animate({top:'+=270px'},500,function(){
			$('.three').delay(500).animate({top:'+=270px'},500,function(){
				$('.four').delay(500).animate({top:'+=270px'},500,function(){
					$('.five').delay(500).animate({top:'+=270px'},500,function(){
						$('.six').delay(500).animate({top:'+=270px'},500,function(){
							$('.seven').animate({top:'+=270px'},500,function(){
								alert('按序落体运动结束! Yeah!')
							});
						});
					});
				});
			});
		});
	});

De cette façon, cela. Cela semble beaucoup plus simple. Comment l'implémenter ?
1. Créez un nouveau tableau et placez-y les fonctions

animation

var _slideFun=[
	function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
	function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
		alert('按序落体运动结束! Yeah!');
	});}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
	$('#demo').dequeue('slideList');
};
_takeOne();

les unes après les autres (changez-le comme cet ordre, est-il beaucoup plus pratique d'ajouter de nouvelles animations). ?);

2. Utilisez queue pour ajouter cet ensemble de tableaux de fonctions d'animation à la file d'attente slideList
3. Utilisez dequeue pour supprimer la première fonction de la file d'attente slideList et exécutez-la ; . Exécution initiale de la première fonction. Il y a également des commentaires détaillés
dans la démonstration DEMO Si vous ne comprenez toujours pas l'explication ci-dessus, veuillez regarder le code source
Quant à. clearQueue(), je n'entrerai pas dans les détails. Dans la démonstration, le bouton stop appelle la méthode clearQueue(). Bien sûr, vous pouvez également utiliser la méthode queue() pour remplacer directement la file d'attente de fonctions actuelle par un []. implémentation d'un tableau vide (je recommande personnellement de le remplacer par un tableau vide ., plus intuitif).

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!