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
flags
stopOnFalsefalse
once
memory
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: callbackCallbacks
add
remove
has
empty
disable
disabled
. Wenn der Speicher nicht leer ist, wird das Hinzufügen gleichzeitig ungültig lockfire
lockedlock
und Parameter, Trigger-Warteschlange fireWithcontext
ist die Methode des Rückrufobjekts firecontext
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,
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!
