Grundlegende Implementierung und Verwendung von jQuery Callback

Da es in der js-Entwicklung kein Multithreading gibt, stoßen wir häufig auf das Konzept des Rückrufs. Registrieren Sie beispielsweise eine Rückruffunktion in der Bereitschaftsfunktion, registrieren Sie die Ereignisverarbeitung von Elementen usw. In komplexeren Szenarien müssen beim Eintreten eines Ereignisses möglicherweise mehrere Rückrufmethoden gleichzeitig ausgeführt werden. Die direkt in Betracht gezogene Implementierung besteht darin, eine Warteschlange zu implementieren und alle Funktionen, die Rückrufe erfordern, zu dieser Warteschlange hinzuzufügen Zur Speicherung werden die gespeicherten Funktionen nacheinander aus dieser Warteschlange abgerufen und ausgeführt.

Übersicht

Abkürzung für $(document).ready().

ermöglicht Ihnen das Binden einer Funktion, die nach dem Laden des DOM-Dokuments ausgeführt werden soll. Diese Funktion funktioniert genauso wie $(document).ready(), außer dass Sie bei Verwendung dieser Funktion alle $()-Operatoren in die Seite einschließen müssen, die beim Laden des DOM ausgeführt werden müssen. Technisch gesehen ist diese Funktion verkettbar – aber nicht viele Fälle verknüpfen tatsächlich auf diese Weise. Sie können eine beliebige Anzahl von $(document).ready-Ereignissen auf einer Seite verwenden. Weitere Informationen zum Ready-Ereignis finden Sie unter ready(Function).

Parameter

callbackFunctionV1.0

Die Funktion, die beim Laden des DOM ausgeführt werden soll

kann einfach wie folgt implementiert werden .

Implementieren Sie zunächst eine Klassenfunktion, um diese Rückrufklasse darzustellen. Verwenden Sie in Javascript ein Array, um diese Warteschlange darzustellen.

function Callbacks() {    this.list = [];
}

Implementieren Sie dann die Methoden in der Klasse durch den Prototyp. Die hinzugefügten und gelöschten Funktionen werden im Array gespeichert. Beim Auslösen können Sie Parameter angeben, die an jede Callback-Funktion übergeben werden.

Callbacks.prototype = {
    add: function(fn) {
        this.list.push(fn);
    },
    remove: function(fn){
        var position = this.list.indexOf(fn);
        if( position >=0){
            this.list.splice(position, 1);
        }
    },
    fire: function(args){
        for(var i=0; i<this.list.length; i++){
            var fn = this.list[i];
            fn(args);
        }
    }
};

Der Testcode lautet wie folgt:

function fn1(args){
    console.log("fn1: " + args);
}
function fn2(args){
    console.log("fn2: " + args);
}
var callbacks = new Callbacks();
callbacks.add(fn1);
callbacks.fire("Alice");
callbacks.add(fn2);
callbacks.fire("Tom");
callbacks.remove(fn1);
callbacks.fire("Grace");

Oder verwenden Sie keine Prototypen und implementieren Sie diese direkt durch Abschlüsse.

function Callbacks() {
    
    var list = [];
    
    return {
         add: function(fn) {
            list.push(fn);
        },
        
        remove: function(fn){
            var position = list.indexOf(fn);
            if( position >=0){
                list.splice(position, 1);
            }
        },
        
        fire: function(args) {
            for(var i=0; i<list.length; i++){
                var fn = list[i];
                fn(args);
            }    
        }
    };
}

In diesem Fall muss auch der Beispielcode angepasst werden. Wir können die Callbacks-Funktion einfach direkt verwenden.

function fn1(args){
    console.log("fn1: " + args);
}
function fn2(args){
    console.log("fn2: " + args);
}
var callbacks = Callbacks();
callbacks.add(fn1);
callbacks.fire("Alice");
callbacks.add(fn2);
callbacks.fire("Tom");
callbacks.remove(fn1);
callbacks.fire("Grace");

Fahren wir mit der zweiten Methode fort.

Für komplexere Szenarien müssen wir nur einmal feuern. Selbst wenn Feuer in der Zukunft aufgerufen wird, wird es nicht mehr wirksam.

Zum Beispiel kann es beim Erstellen eines Objekts so aussehen. Die Verwendung von Once bedeutet hier, dass nur einmal ausgelöst werden kann.

var callbacks = Callbacks("once");

Dann muss auch unser Code angepasst werden. Tatsächlich ist es sehr einfach. Wenn einmal festgelegt ist, wird nach dem Auslösen einfach die ursprüngliche Warteschlange beendet.

function Callbacks(options) {
    var once = options === "once";
    var list = [];
    
    return {
         add: function(fn) {
            if(list){
                list.push(fn);
            }
        },
        
        remove: function(fn){
            if(list){
                var position = list.indexOf(fn);
                if( position >=0){
                    list.splice(position, 1);
                }
            }
        },
        
        fire: function(args) {
            if(list)
            {
                for(var i=0; i<list.length; i++){
                    var fn = list[i];
                    fn(args);
                }
            }
            if( once ){
                list = undefined;
            }
        }
    };
}

In jQuery wird nicht nur einmal bereitgestellt, sondern es werden vier verschiedene Arten von Methoden bereitgestellt:

einmal: kann nur einmal ausgelöst werden.

Speicher: Wenn die Warteschlange ausgelöst wurde, wird die hinzugefügte Funktion direkt aufgerufen, ohne sie erneut auszulösen.

unique: Garantierte Eindeutigkeit der Funktion

stopOnFalse: Solange ein Callback false zurückgibt, werden nachfolgende Aufrufe unterbrochen.

Diese vier Methoden können kombiniert werden. Verwenden Sie einfach Leerzeichen, um sie im Konstruktor zu trennen, z. B. $.Callbacks("once Memory Unique");

Die offizielle Dokumentation enthält einige Beispiele für Verwendungsmethoden .

callbacks.add(fn1, [fn2, fn3,...])//Einen/mehrere Rückrufe hinzufügen
callbacks.remove(fn1, [fn2, fn3,...])/ / Einen/mehrere Rückrufe entfernen
callbacks.fire(args)//Rückruf auslösen, Argumente an fn1/fn2/fn3 übergeben...
callbacks.fireWith(context, args)//Kontextkontext angeben und dann Rückruf auslösen
callbacks.lock()//Sperren Sie den aktuellen Auslösestatus der Warteschlange
callbacks.disable()//Deaktivieren Sie den Manager, das heißt, alle Brände werden nicht wirksam

Das obige ist der detaillierte Inhalt vonGrundlegende Implementierung und Verwendung von jQuery Callback. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!