Der Nutzungsunterschied zwischen Warteschlange und Warteschlangenentfernung in jQuery

queue und dequeue in jQuery sind eine Reihe sehr nützlicher Methoden. Sie sind besonders nützlich für eine Reihe von Funktionen, die der Reihe nach ausgeführt werden müssen. Insbesondere animierteAnimationen, Ajax und Timeout sowie andere Funktionen, die eine gewisse Zeit benötigen

Warteschlangen- und Entnahmeprozesse sind hauptsächlich:
1 Verwenden Sie die Warteschlange, um die Funktion hinzuzufügen Warteschlange (Normalerweise ein Funktionsarray)
2, verwenden Sie „Dequeue“, um die erste Funktion im Funktionsarray herauszunehmen und auszuführen (verwenden Sie die Methode „shift()“, um sie herauszunehmen und auszuführen)

was bedeutet, dass, wenn es erneut ausgeführt wird Beim Entfernen aus der Warteschlange erhalten Sie eine andere Funktion
Es bedeutet auch, dass die nächste Funktion in der Warteschlange niemals ausgeführt wird, wenn das Entfernen aus der Warteschlange nicht ausgeführt wird

Zum Ausführen der Wenn Sie die Methode und Animation für ein Element animieren, fügt jQuery sie auch intern zur Funktionswarteschlange mit dem Namen fx hinzu. Um Animationen für mehrere Elemente nacheinander auszuführen, müssen wir die Warteschlange manuell festlegen.

Ein Beispiel: Sie möchten, dass sich zwei Divs nacheinander nach links bewegen. Klicken Sie hier, um die Ansicht anzuzeigen.

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

Wenn Sie sich nur ein paar Mal abwechseln, um sich zu bewegen, können Sie Folgendes verwenden

Callback-Funktion von animate Platzieren Sie dazu eine Animation im Callback einer anderen Animation , z. B.

 $(“#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(“动画结束”);
 });
 });
 });
 });
 });

Aber diese Methode ist einfach grausam, wenn es viele Animationen gibt.

Zu diesem Zeitpunkt ist es viel einfacher, die Warteschlange zu verwenden und aus der Warteschlange zu entfernen:

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 Ich schlage zunächst vor, ein Funktionsarray zu erstellen, das eine Reihe von Animationen enthält, die benötigt werden nacheinander ausgeführt werden
2, dann habe ich eine Rückruffunktion definiert, die die Dequeue-Methode verwendet, um die nächste Funktion in der Warteschlange auszuführen
3, und dann dieses Funktionsarray in die Warteschlange von myAnimation für das Dokument gestellt (Sie können Wählen Sie ein beliebiges Element aus. Der Einfachheit halber habe ich diese Warteschlange einfach in das Dokument eingefügt. und es ist sehr bequem zu erhöhen oder zu verringern.
Wenn Sie außerdem nicht mehr mit der nächsten Animation fortfahren möchten (z. B. wenn der Benutzer auf eine bestimmte Schaltfläche klickt), müssen Sie nur die Warteschlange leeren. Um weitere hinzuzufügen, müssen Sie sich nur in die Warteschlange einreihen

Ich habe zuvor ein Warte-Plug-in gepostet, das zum Anhalten von Animationen für einen bestimmten Zeitraum verwendet wird

Sie können eine nehmen Schauen Sie, auch dieses Prinzip wird standardmäßig in fx eingefügt und in die Warteschlange gestellt, bis das Timeout abgelaufen ist, um mit der Ausführung der nächsten Funktion in der Warteschlange fortzufahren.

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

Natürlich kann dies auch für Methoden wie Ajax verwendet werden. Wenn eine Reihe von Ajax-Interaktionen erforderlich sind, möchte jede Ajax-Interaktion beginnen, nachdem die vorherige endet. Die ursprünglichste Methode war zuvor die Verwendung einer Rückruffunktion. aber das ist zu problematisch. Verwenden Sie auch die Warteschlange, um eine Warteschlange hinzuzufügen, und führen Sie die Warteschlange nach jedem Ajax im Rückruf einmal aus.

Wenn Sie die jQuey-Bibliothek nicht verwenden, können Sie auch selbst einen einfachen Code schreiben, um dieses Problem zu lösen.

Das obige ist der detaillierte Inhalt vonDer Nutzungsunterschied zwischen Warteschlange und Warteschlangenentfernung in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!