Welchen Sinn hat die Verwendung von Callbacks in jQuery?

Callbacks ist eine in jQuery 1.7 eingeführte Methode, die zum Verwalten einer Gruppe von Callback-Funktionen mit denselben Methodenparametern verwendet wird. Neben dem Hinzufügen, Löschen und Löschen von Callbacks wie Arrays bietet Callbacks auch mehrere spezielle Modi. In verschiedenen Modi unterscheiden sich der Lebenszyklus und die Ausführungsreihenfolge der Rückruffunktionen geringfügig.

Callback-Spalte generieren (Callbacks)

var callbacks = $.Callbacks(flags);

Der Parameter falgs ist eine Zeichenfolge, die verwendet wird, um den Modus von Callbacks anzugeben. Im Modus „Once stopOnFalse“ erfolgt der Callback beispielsweise nur höchstens einmal ausgeführt werden. Wenn ein bestimmter Callback während der Ausführung „false“ zurückgibt, wird auch die Ausführung der Callback-Spalte unterbrochen.

Wo sind also die Einsatzszenarien für jQuery.Callbacks?

In vielen Fällen ist es notwendig, die sequentielle Ausführung einer Reihe von Funktionen zu steuern. Dann ist im Allgemeinen eine Warteschlangenfunktion erforderlich, um dieses Problem zu lösen

Schauen wir uns einen Code an

function Aaron(List, callback) {
    setTimeout(function() {
      var task = List.shift();
      task(); //执行函数
      if (task.length > 0) {  //递归分解
        setTimeout(arguments.callee, 1000)
      } else {
        callback()
      }
    }, 25)
  }
  Aaron([function(){
    alert('a')
  },function(){
    alert('b')
  }],function(){
    alert('callback')
  })
 
分别弹出 ‘a’ , ‘b’ ,’callback’

Übergeben Sie einen Satz Funktionsparameter, verlassen Sie sich auf eine rekursive Analyse und führen Sie sie einzeln aus um eins. Tatsächlich können Sie sich darauf verlassen setTimeout Das Prinzip, eine Funktion am Ende der Warteschlange hinzuzufügen, bevor sie ausgeführt wird

***** Aber ist es mühsam, sie so zu schreiben? *****

Wechseln wir zur von jQuery bereitgestellten Methode

var callbacks = $.Callbacks();
  callbacks.add(function() {
    alert('a');
  })
  callbacks.add(function() {
    alert('b');
  })
  callbacks.fire(); //输出结果: 'a' 'b'

Ist das nicht viel praktischer und der Code ist sehr klar? Es handelt sich um ein Mehrzweck-Rückruffunktionslistenobjekt, das eine leistungsstarke Möglichkeit zum Verwalten der Rückruffunktionswarteschlange bietet.

Es bietet außerdem mehrere praktische Verarbeitungsparameter

einmal: Stellen Sie sicher, dass diese Rückrufliste nur einmal ausgeführt wird (.fire()) (wie ein verzögerter Speicher).

Speicher : Behalten Sie den vorherigen Wert bei. Der zuletzt am Ende dieser Liste hinzugefügte Wert wird sofort ausgeführt, wenn ein Rückruf aufgerufen wird (z. B. ein verzögerter Wert).

einzigartig: Stellt sicher, dass jeweils nur ein Rückruf hinzugefügt werden kann (also in der Liste gibt es keine doppelten Rückrufe).

stopOnFalse: Wenn ein Rückruf „false“ zurückgibt, unterbrechen Sie den Anruf

var callbacks = $.Callbacks('once');
  callbacks.add(function() {
    alert('a');
  })
  callbacks.add(function() {
    alert('b');
  })
  callbacks.fire(); //输出结果: 'a' 'b'
  callbacks.fire(); //未执行

einmal, damit die Rückrufwarteschlange nur einmal ausgeführt wird

Rückrufmodus

Standardmodus: Die Rückrufe in der Rückrufspalte können standardmäßig mehrmals ausgeführt werden und die Rückruffunktion kann wiederholt hinzugefügt werden. Während der Ausführung wird der neu hinzugefügte Rückruf jedoch nicht ausgeführt.

einmal: Jeder Rückruf in der Spalte wird höchstens einmal ausgeführt. Nach Abschluss der Ausführung wird die Rückruffunktionsspalte gelöscht.

Speicher: Wenn während des Rückrufausführungsprozesses ein neuer Rückruf hinzugefügt wird, kann der neue Rückruf auch ausgeführt werden.

Einzigartig: Derselbe Rückruf kann nicht wiederholt hinzugefügt werden.

stopOnFalse: Wenn ein Rückruf „false“ zurückgibt, werden nachfolgende Rückrufe nicht ausgeführt, auch nicht im Speichermodus.

var callbacks = $.Callbacks("once memory");

Callback-Ausführungsreihenfolge

Die Callbacks werden im Array gespeichert und dann durch eine for-Schleife durchlaufen, sodass die Callbacks in der Spalte in der Reihenfolge ausgeführt werden, in der sie hinzugefügt werden, und die Der zuletzt hinzugefügte Befehl wird im Allgemeinen zuletzt ausgeführt.

// Fire the items on the list
var foo = function( value ) {
  console.log( "foo:" + value );
};
// Add another function to the list
var bar = function( value ){
  console.log( "bar:" + value );
};
var callbacks = $.Callbacks();
callbacks.add( foo );
callbacks.add( bar);
callbacks.fire("hello"); 
// output: foo: hello
// output: bar: hello

Die einzige Ausnahme ist, wenn es sich bei der Markierung um einen Speicher handelt und wenn fire() zuvor aufgerufen wurde, dann wird der neue Rückruf sofort mit den Parametern des vorherigen Feuers ausgeführt, nachdem er durch add( hinzugefügt wurde. ). Allerdings wird der von fire() vor add() aufgerufene Callback nicht sofort erneut ausgeführt, wenn fire() oder fireWith() nicht verwendet wird.

Weitere wichtige Punkte

Fire() oder fireWith() von Rückrufen in der Rückruffunktion aufrufen

Es gibt eine Situation, in der es erneut aufgerufen wird Was soll ich in diesem Fall in der fire()- oder fireWith()-Methode des Callback-Callbacks-Objekts tun?

Jquery macht Folgendes: Rufen Sie fire() oder fireWith() im Rückruf auf. Das Callbacks-Objekt speichert nur die Parameter von fire() oder fireWith() und führt den Rückruf nicht sofort in der Spalte aus. Nachdem alle Callbacks in Callbacks ausgeführt wurden, führen Sie alle Callbacks im Callbacks-Objekt mit neuen Parametern erneut aus.

Hinweis: Wenn die Markierung einmal ist, hat die Ausführung von fire oder fireWith() im Rückruf keine Auswirkung.

function fn1( value ){
   console.log( value );
 
   if (value == "bar!") return false;
 
   callbacks.fire("bar!");
}
 
function fn2( value ){
  console.log( "fn2 says: " + value);
}
 
var callbacks =$.Callbacks("stopOnFalse");
 
callbacks.add( fn1 );
callbacks.add( fn2 );
 
// Outputs: foo!
// Outputs: fn2 says:foo!
// Outputs: bar!
callbacks.fire("foo!" );

Nach dem Aufruf von callbacks.disable() können Rückrufe nicht mehr aktiviert werden

Nach dem Aufruf von unlock() wird die Rückruffunktionsliste zu diesem Zeitpunkt mit fire oder fireWith gelöscht funktioniert nicht. Es erfolgt keine Antwort. Daher stellt Callbacks keine Aktivierungsmethode bereit, da alle Rückrufe gelöscht wurden und keine Notwendigkeit besteht, sie erneut zu aktivieren.

callbacks.lock()

Die Callback-Spalte ist gesperrt und der Aufruf von callbacks.fire() oder callbacks.fireWith() ist ungültig.

Wenn callbacks.lock() in einem Callback aufgerufen wird, ist eines zu beachten:

Callbacks haben einen Speichertag: Im aktuellen fire() oder fireWith werden keine Callbacks ausgeführt Die Ausführung der ()-Methode wird fortgesetzt, aber callbacks.fire() und callbacks.fireWith() im Callback funktionieren nicht mehr.

Rückrufe haben kein Memory-Tag: Alle Rückrufe werden gelöscht, was bedeutet, dass nachfolgende Rückrufe nicht mehr ausgeführt werden.

Das Seltsame ist, dass Callbacks keine Entsperrmethode bieten. Das heißt, sobald sie gesperrt sind, verlieren Callbacks dauerhaft die Fähigkeit, fire() oder fireWith() aufzurufen.

Das obige ist der detaillierte Inhalt vonWelchen Sinn hat die Verwendung von Callbacks in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!