Ausführliche Erläuterung der Anwendungsbeispiele der queue()-Funktion queue in jQuery

In diesem Artikel wird hauptsächlich das Beispiel-Tutorial der Funktion queue() in jQuery vorgestellt. Die Funktion queue() bietet Komfort für die Ausführungssequenzsteuerung der Funktion JavaScript Freunde können darauf verweisen

Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt: Wenn Sie die Warteschlange abrufen, erhalten Sie beim Festlegen der Warteschlange (Ersetzungswarteschlange, Anhängefunktion) nur die Warteschlange für jedes übereinstimmende Element werden individuell eingestellt.
Diese Funktion gehört zum 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.

Syntax
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 abgerufen wird der angegebene Name. Wenn der Parameter newQueue angegeben ist, bedeutet dies, dass die neue Warteschlange newQueue zum Festlegen (Ersetzen) aller Inhalte in der aktuellen Warteschlange verwendet wird.

Verwendung 2:

jQueryObject.queue( [ queueName ,] callback )

Fügen Sie die angegebene Funktion zur 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 entsprechend den im vorherigen Syntaxabschnitt definierten Parameternamen.
queueName: Optional/Warteschlangenname, angegeben durch den Typ String, der Standardwert ist „fx“ (stellt die Standardwarteschlange für Animationseffekte in jQuery dar).
newQueue: Optionaler/Array-Typ, der zum Ersetzen des neuen Warteschlangeninhalts der aktuellen Warteschlange verwendet wird.
Rückruf: Die durch Funktionstyp angegebene Funktion wird an die Warteschlange angehängt. Diese Funktion verfügt über einen Funktionsparameter, der aufgerufen werden kann, um die erste Funktion in der Warteschlange zu entfernen und auszuführen.

Rückgabewert
queue()Der Rückgabewert der Funktion ist vom Typ Array/jQuery. Der Typ des Rückgabewerts hängt davon ab, was aktuell ist Die Funktion queue() wird ausgeführt.
Wenn die Funktion queue() eine Einstellungsoperation durchführt (die Warteschlange ersetzen, eine Funktion anhängen), gibt sie das aktuelle jQuery-Objekt selbst zurück, wenn es sich um eine Abrufoperation handelt, 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 einen Teil des benötigten Codes 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

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

Aber das ist alles, wenn Sie es tatsächlich zur Webseite hinzufügen und versuchen, es auszuführen, werden Sie feststellen, dass es nicht das ist, was Sie sehen bekommen“. Es wird überhaupt keine Wirkung haben.

Geändert:

$("p").queue("custom", function(next) {
  $('p').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. queue: false

$("#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 dann Für die nächsten 1000 Millisekunden wird die Deckkraft gesteuert. Die „Fader“-Warteschlange und „fx“ steuern parallel die Höhe. Die Parallelität hier ist queue:false

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

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

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

Sehr offensichtlich ist es, die Warteschlange mit dem Warteschlangennamen „fx“ abzurufen. Wenn Sie die Länge erhalten möchten:

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

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

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

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

Wenn auf eine Schaltfläche geklickt wird:

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele der queue()-Funktion queue in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!