Erfahren Sie mehr über Rückrufe von jQuery-Quellcode

Dieser Artikel stellt hauptsächlich das Erlernen von Rückrufen des jQuery-Quellcodes vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde, die ihn benötigen, darauf zurückgreifen.

und

von jQuery werden asynchron über Rückrufe implementiert, und der Kern ihrer Implementierung ist ajax. deferredCallbacksVerwendungsmethode

Um sie zu verwenden, müssen Sie zunächst ein neues Instanzobjekt erstellen. Beim Erstellen können Sie den Parameter

übergeben, um Einschränkungen für Rückrufobjekte anzugeben. Die optionalen Werte lauten wie folgt.

flags

• : Auslösen stoppen, wenn die Funktion in der Rückruffunktionswarteschlange zurückkehrt

  stopOnFalsefalse

• : Die Rückruffunktionswarteschlange kann nur einmal ausgelöst werden

  once

• : Den in der letzten Triggerwarteschlange übergebenen Wert aufzeichnen. Die neu zur Warteschlange hinzugefügte Funktion verwendet den aufgezeichneten Wert als Parameter und wird sofort ausgeführt.

  memory

• : Die Funktionen in der Funktionswarteschlange sind alle eindeutig

  unique

  var cb = $.Callbacks('memory');
  cb.add(function(val){
      console.log('1: ' + val)
  })
  cb.fire('callback')
  cb.add(function(val){
      console.log('2: ' + val)
  })
  // console输出
  1: callback
  2: callback

Bietet eine Reihe von Instanzmethoden zum Betreiben der Warteschlange und Anzeigen des Status des Rückrufobjekts.

Callbacks

• : Fügen Sie der Rückrufwarteschlange eine Funktion hinzu, die eine Funktion oder ein Array von Funktionen sein kann

  add

• : Entfernen Sie es aus der Rückrufwarteschlange. Funktion angeben

  remove

• : Bestimmen Sie, ob eine bestimmte Funktion in der Rückrufwarteschlange vorhanden ist

  has

• : Löschen Sie die Rückrufwarteschlange

  empty

• : Deaktivieren Sie das Hinzufügen von Funktionen und Triggerwarteschlangen, löschen Sie die Rückrufwarteschlange und den zuletzt übergebenen Wert

  disable

• : Bestimmen Sie, ob das Rückrufobjekt deaktiviert wurde

  disabled

• : Deaktivieren

  . Wenn der Speicher nicht leer ist, wird das Hinzufügen gleichzeitig ungültig lockfire

• : Bestimmen Sie, ob es aufgerufen wird

  lockedlock

• : Übergeben Sie

  und Parameter, Trigger-Warteschlange fireWithcontext

• : Übergeben Sie das Parameter-Triggerobjekt,

  ist die Methode des Rückrufobjekts firecontext

Quellcodeanalyse

Definiert mehrere lokale Variablen und Methoden, die zum Aufzeichnen des Status und der Funktionen des Rückrufobjekts usw. verwendet werden. Die oben genannten Rückrufobjektmethoden sind in

implementiert Objekt mithilfe der von $.Callback() bereitgestellten Methoden. Dies hat den Vorteil, dass sichergestellt wird, dass es außer self keine andere Möglichkeit gibt, den Status und die Warteschlange des Rückrufobjekts zu ändern. selfself Unter diesen ist self der Index der aktuellen Triggerfunktion in der Warteschlange,

ist die Rückruffunktionswarteschlange,

zeichnet die Parameter des letzten Triggers auf und wird übergeben, wenn die Das Callback-Objekt wird instanziiert. firingIndex Es wird verwendet, wenn list den Kontext und die eingehenden Parameter speichert, wenn jeder Callback ausgeführt wird. memory ist eigentlich memory und ruft intern queue die in self.fire(args) definierte lokale Funktion self.fireWith(this,args) auf. self.fireWith

    ...
    // 以下变量和函数 外部无法修改，只能通过self暴露的方法去修改和访问
    var // Flag to know if list is currently firing
        firing,

        // Last fire value for non-forgettable lists
        // 保存上一次触发callback的参数，调用add之后并用该参数触发
        memory,

        // Flag to know if list was already fired
        fired,

        // Flag to prevent firing
        // locked==true fire无效 若memory非空则同时add无效
        locked,

        // Actual callback list
        // callback函数数组
        list = [],

        // Queue of execution data for repeatable lists
        // 保存各个callback执行时的context和传入的参数
        queue = [],

        // Index of currently firing callback (modified by add/remove as needed)
        // 当前正触发callback的索引
        firingIndex = -1,

        // Fire callbacks
        fire = function() {
            ...
        },
        
        // Actual Callbacks object
        self = {
            // Add a callback or a collection of callbacks to the list
            add: function() {
                ...
            },
            ...
            // Call all callbacks with the given context and arguments
            fireWith: function( context, args ) {
                if ( !locked ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ]; // :前为args是数组，:后是string
                    queue.push( args );
                    if ( !firing ) {
                        fire();
                    }
                }
                return this;
            },

            // Call all the callbacks with the given arguments
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            ...
        }

CallbacksFügen Sie über fire Funktionen zur Rückrufwarteschlange hinzu. Der Code lautet wie folgt. Stellen Sie zunächst fest, ob nicht ausgelöst wird. Wenn ja, verschieben Sie

an das Ende der Rückrufwarteschlange und speichern Sie self.add. Verwenden Sie dann den Funktionsausdruck für die sofortige Ausführung, um die Add-Funktion zu implementieren, die eingehenden Parameter in der Funktion zu durchlaufen und zu bestimmen, ob sie nach der Typbeurteilung zur Warteschlange hinzugefügt werden soll. Wenn das Rückrufobjekt über die Markierung memory verfügt, ist dies ebenfalls erforderlich um zu beurteilen, ob sich die Funktion in der Warteschlange befindet. Existiert sie bereits? Wenn das Rückrufobjekt die Markierung fireIndex hat, wird memory nach Abschluss des Hinzufügens ausgelöst, um die neu hinzugefügte Funktion auszuführen. Die Methoden unique

            add: function() {
                if ( list ) {

                    // If we have memory from a past run, we should fire after adding
                    // 如果memory非空且非正在触发，在queue中保存memory的值,说明add后要执行fire
                    // 将firingIndex移至list末尾 下一次fire从新add进来的函数开始
                    if ( memory && !firing ) {
                        firingIndex = list.length - 1;
                        queue.push( memory );
                    }

                    ( function add( args ) {
                        jQuery.each( args, function( _, arg ) {
                            // 传参方式为add(fn)或add(fn1,fn2)
                            if ( jQuery.isFunction( arg ) ) {
                                /**
                                 * options.unique==false
                                 * 或
                                 * options.unique==true&&self中没有arg
                                 */
                                if ( !options.unique || !self.has( arg ) ) {
                                    list.push( arg );
                                }
                            } else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {
                                // 传参方式为add([fn...]) 递归
                                // Inspect recursively
                                add( arg );
                            }
                        } );
                    } )( arguments ); //arguments为参数数组 所以add的第一步是each遍历

                    //添加到list后若memory真则fire，此时firingIndex为回调队列的最后一个函数
                    if ( memory && !firing ) {
                        fire();
                    }
                }
                return this;
            }

memoryfire und rufen tatsächlich die lokale Funktion

auf, und der Code lautet wie folgt. Bei Auslösung müssen fire und fireWith aktualisiert werden, um anzuzeigen, dass es ausgelöst wurde und ausgelöst wird. Führen Sie die Funktionen in der Warteschlange über eine for-Schleife aus. Nachdem Sie die Schleife beendet haben, aktualisieren Sie fire auf -1, um anzuzeigen, dass der nächste Trigger bei der ersten Funktion in der Warteschlange beginnt. Durchlaufen Sie das in fired aktualisierte firing. firingIndex ist das Array, das das Array speichert. Das erste Element jedes Arrays ist fireWith und das zweite Element ist das Parameterarray. Beim Ausführen der Funktion muss überprüft werden, ob queue zurückgegeben wird und das Callback-Objekt die Markierung queue aufweist. Wenn ja, beenden Sie die Auslösung. context

// Fire callbacks
        fire = function() {

            // Enforce single-firing
            // 执行单次触发
            locked = locked || options.once;

            // Execute callbacks for all pending executions,
            // respecting firingIndex overrides and runtime changes
            // 标记已触发和正在触发
            fired = firing = true;
            // 循环调用list中的回调函数
            // 循环结束之后 firingIndex赋-1 下一次fire从list的第一个开始 除非firingIndex被修改过
            // 若设置了memory，add的时候会修改firingIndex并调用fire
            // queue在fireWith函数内被更新，保存了触发函数的context和参数
            for ( ; queue.length; firingIndex = -1 ) {
                memory = queue.shift();
                while ( ++firingIndex < list.length ) { 

                    // Run callback and check for early termination
                    // memory[0]是content memory[1]是参数
                    if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
                        options.stopOnFalse ) {
                        
                        // Jump to end and forget the data so .add doesn't re-fire
                        // 当前执行函数范围false且options.stopOnFalse==true 直接跳至list尾 终止循环
                        firingIndex = list.length;
                        memory = false;
                    }
                }
            }

            // 没设置memory时不保留参数
            // 设置了memory时 参数仍保留在其中
            // Forget the data if we're done with it
            if ( !options.memory ) {
                memory = false;
            }

            firing = false;

            // Clean up if we're done firing for good
            if ( locked ) {

                // Keep an empty list if we have data for future add calls
                if ( memory ) {
                    list = [];

                // Otherwise, this object is spent
                } else {
                    list = "";
                }
            }
        },

false stopOnFalseDas Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in die asynchrone for-Schleife von js

jQuery-Ajax fordert Json-Daten an und lädt sie auf die Startseite

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Rückrufe von jQuery-Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!