Beispiel-Tutorial der Funktion queue() in jQuery_jquery

Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt: Rufen Sie beim Abrufen der Warteschlange nur die Warteschlange für das erste übereinstimmende Element ab. Wenn Sie die Warteschlange festlegen (Ersetzungswarteschlange, Anhängefunktion), legen Sie sie für jedes übereinstimmende Element separat fest.
Diese Funktion gehört zu einem jQuery-Objekt (Instanz). Wenn Sie die erste Funktion in der Warteschlange entfernen und ausführen müssen, verwenden Sie die Funktion dequeue(). Sie können auch die Funktion „clearQueue()“ verwenden, um die angegebene Warteschlange zu löschen.

Grammatik
Diese Funktion ist neu in jQuery 1.2. Die Funktion queue() hat die folgenden zwei Verwendungszwecke:

Verwendung 1:

jQueryObject.queue( [ queueName ] [, newQueue ] )

Wenn keine Parameter angegeben sind oder nur der Parameter queueName angegeben ist, bedeutet dies, dass die Funktionswarteschlange mit dem angegebenen Namen abgerufen wird. Wenn der Parameter newQueue angegeben ist, bedeutet dies, dass die neue Warteschlange newQueue verwendet wird, um alle Inhalte in der aktuellen Warteschlange festzulegen (zu ersetzen).

Verwendung 2:

jQueryObject.queue( [ queueName ,] callback )

Fügt die angegebene Funktion der angegebenen Warteschlange hinzu (Ende).
Hinweis: Alle Einstellungsvorgänge der Funktion queue() gelten für jedes Element, das mit dem aktuellen jQuery-Objekt übereinstimmt. Alle Lesevorgänge gelten nur für das erste übereinstimmende Element.

Parameter
Bitte finden Sie die entsprechenden Parameter anhand der im vorherigen Syntaxabschnitt definierten Parameternamen.
queueName: optional/Warteschlangenname, angegeben durch String-Typ, standardmäßig „fx“ (repräsentiert die Standardwarteschlange für Animationseffekte in jQuery).
newQueue: Optional/Array-Typ Eine neue Warteschlange, die den Inhalt der aktuellen Warteschlange ersetzt.
Rückruf: Die durch Funktionstyp angegebene Funktion wird an die Warteschlange angehängt. Diese Funktion verfügt über einen Funktionsparameter, der aufgerufen wird, um die erste Funktion in der Warteschlange zu entfernen und auszuführen.

Rückgabewert
Der Rückgabewert der queue()-Funktion ist vom Typ Array/jQuery. Der Typ des Rückgabewerts hängt davon ab, ob die aktuelle queue()-Funktion eine Get-Operation oder eine Set-Operation ausführt.
Wenn die Funktion queue() eine Einstellungsoperation ausführt (die Warteschlange ersetzen, eine Funktion anhängen), gibt sie das aktuelle jQuery-Objekt selbst zurück. Wenn sie eine Abrufoperation ausführt, gibt sie die erhaltene Funktionswarteschlange (Array) zurück.
Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt, verwendet die Funktion queue() beim Lesen von Daten nur das erste übereinstimmende Element.

Beispiel:
1. jQuery stellt uns die Funktion queue() zur Verfügung, um den benötigten Code in eine Warteschlange einzufügen

$('#test-change1').toggle(function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-goal1'));
    next();
  }).show('slow');

},function(){
  $('#test-object1').hide('slow').queue(function(next){
    $('#test-object1').appendTo($('#test-origin1'));
    next();      
  }).show('slow');
});

2. Benutzerdefinierte Warteschlange

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
});

Aber das ist nur dieser Code. Wenn Sie ihn tatsächlich zur Webseite hinzufügen und versuchen, ihn auszuführen, werden Sie feststellen, dass es sich nicht um „Was Sie sehen, ist das, was Sie bekommen“ handelt, und es wird überhaupt keine Wirkung haben.

Nach der Änderung:

$("div").queue("custom", function(next) {
  $('div').css({'background':'red'});
  next();
})
.dequeue("custom"); //this is the key

Die allgemeine Definition von dequeue() besteht darin, „die oberste Funktion in der Warteschlange zu löschen und auszuführen“. Ich bin mit dem Wort „löschen“ nicht einverstanden, bevorzuge jedoch „entfernen“. Tatsächlich ist die Funktion dieser Funktion wie ein Zeiger auf die Warteschlange in einer Datenstruktur, nachdem die vorherige Funktion in der Warteschlange ausgeführt wurde Funktion der Warteschlange wird oben entfernt.

3. Warteschlange: falsch

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
  $(this).animate({opacity: 0},
    {duration: 1000, queue: false});
  next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

In den ersten 1000 Millisekunden wird nur die „fx“-Warteschlange ausgeführt, die die Höhe steuert, und in den nächsten 1000 Millisekunden werden dann die „fader“-Warteschlange, die die Deckkraft steuert, und die „fx“-Warteschlange, die die Höhe steuert, ausgeführt parallel. Die Parallelität hier ist queue:false

$('#section3a').slideUp(1000)
      .slideDown(1000)
      .animate({width: '50px'}, {duration: 1000, queue: false});

4. Ermitteln Sie die Warteschlangenlänge
Verwenden Sie beispielsweise den Warteschlangennamen, um die Länge des passenden Elements zu erhalten:

var $queue=$("div").queue('fx');

Natürlich erhalten Sie die Warteschlange mit dem Warteschlangennamen „fx“. Wenn Sie die Länge erhalten möchten:

var $length=$('div').queue('fx').length;

Beachten Sie, dass die Warteschlangenlänge hier nur die Warteschlangenlänge des passenden Elements ist, das noch nicht ausgeführt wurde. Wenn die Animation beendet ist, wird die Warteschlangenlänge automatisch auf 0 reduziert

5. Ersatzwarteschlange

$('div').queue('fx',function(){
    $('div').slideDown('slow')
         .slideUp('slow')
         .animate({left:'+=100'},4000);
});//定义fx
$('div').queue('fx2',function(){
    $('div').slideDown('fast')
         .slideUp('fast')
         .animate({left:'+=100'},1000);
});//定义fx2

Hier werden zwei Warteschlangen definiert, eine ist die langsame Warteschlange, die standardmäßig „fx“ ist, und die andere ist die schnelle Warteschlange „fx2“

Wenn auf eine Schaltfläche geklickt wird:

$('input').click(function(){
  $('div').queue('fx',fx2);
});