Detaillierte Erläuterung der jQuery-Warteschlangensteuerungsmethoden queue()/dequeue()/clearQueue()

Im Kern von

jQuery gibt es eine Reihe von queue-Steuermethoden. Diese Gruppe von Methoden besteht aus drei Methoden: queue()/dequeue()/clearQueue(). Man kann sagen, dass die Steuerung sequentiell ausgeführter Funktionen prägnant und einfach ist. Sie wird hauptsächlich in der animate()-Methode und bei anderen -Ereignissen verwendet, die in chronologischer Reihenfolge ausgeführt werden müssen 🎜>Erläutern wir zunächst die jeweilige Bedeutung dieser Methoden.

queue(name,[callback]):
Wenn nur ein Parameter übergeben wird, kehrt er zurück und zeigt auf die Warteschlange des ersten Abgleichs Element (das ein Array von Funktionen sein wird, Warteschlangenname Der Standardwert ist fx); wenn zwei Parameter übergeben werden, ist der erste Parameter immer noch der Warteschlangenname von fx, und der zweite Parameter wird in zwei Situationen unterteilt Wenn der zweite Parameter ein Funktionsarray ist, wird er durch eine neue Warteschlange (Funktionsarray) ersetzt ist etwas verwirrend zu verstehen. Später sehen Sie die DEMO.

dequeue(name):

Dies ist leicht zu verstehen, es geht darum, eine Warteschlangenfunktion von der Vorderseite zu entfernen die Warteschlange und führen Sie sie aus.clearQueue ([queueName]):
Dies ist eine neue Methode, die in 1.4 hinzugefügt wurdeAlle Warteschlangen löschen, die noch nicht für das Objekt ausgeführt wurden. Die Parameter sind optional und der Standardwert ist fx. Ich persönlich halte diese Methode jedoch für nicht sehr nützlich, daher kann die Methode „clearQueue“ implementiert werden, indem der zweite Parameter der beiden Parameter an die Methode „queue()“ übergeben wird > Nun möchten wir einen solchen Effekt erzielen. Es gibt digitale Quadrate, die mit 1 bis 7 markiert sind, und diese sieben Quadrate müssen von links nach rechts angeordnet werden. Klicken Sie hier, um die DEMO anzusehen

Ich werde die CSS- und HTML-Teile nicht veröffentlichen, sie sind in der DEMO enthalten. Wenn Sie auf „Konventionell“ klicken, müssen Sie möglicherweise den folgenden jQ-Code verwenden, um dies zu erreichen:

Nun ja, der Effekt ist perfekt dargestellt, aber können Sie diese Art von schwindelerregendem Code ertragen? Selbst wenn Sie es ertragen können, was ist, wenn Sie etwas ändern möchten? Bestimmte Ausführungsreihenfolge: Sie möchten beispielsweise, dass 5 fällt, bevor 3 fällt, oder dass Sie acht neue Blöcke von 8 auf 15 hinzufügen möchten. Was sollten Sie bei Ji Jis Änderungen tun? Um diesen Effekt zu erzielen, benötigen wir eine andere prägnante und praktische Methode, nämlich die jQuery-Warteschlangensteuerungsmethode:

$('.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!')
							});
						});
					});
				});
			});
		});
	});

Auf diese Weise es sieht viel einfacher aus. Wie implementiert man es?
1. Erstellen Sie ein neues Array und fügen Sie die

Animationsfunktionen

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();

nacheinander ein Animationen?);

2. Verwenden Sie queue, um diesen Satz von Animationsfunktionsarrays zur slideList-Warteschlange hinzuzufügen.
4. Erste Ausführung der ersten Funktion Es gibt auch detaillierte Kommentare
in der DEMO-Demonstration. Wenn Sie die obige Erklärung immer noch nicht verstehen, schauen Sie sich bitte den Quellcode an Auf die Methode „clearQueue()“ werde ich nicht näher eingehen. In der Demonstration ruft die Schaltfläche „Stopp“ die Methode „clearQueue()“ auf. Natürlich können Sie die Methode „queue()“ auch direkt verwenden, um die aktuelle Funktionswarteschlange durch eine [ zu ersetzen. ] leere Array-Implementierung (ich persönlich empfehle, es durch ein leeres Array zu ersetzen.

).

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der jQuery-Warteschlangensteuerungsmethoden queue()/dequeue()/clearQueue(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!