Read the 19th of jquery (multi-purpose callback function list object)

$. Callbacks is newly added in version 1.7. It is a multi-purpose callback function list object and provides a powerful way to manage callback function queues.

Whole $. the callbacks source code contains less than 200 lines. It is a factory function that uses the function call method (not new, it is not a class) to create an object, it has an optional parameter flags used to set the callback function behavior.

$. Callbacks is used internally in jquery, such as functions that provide basic functions for $. Ajax, $. deferred, and other components. It can also be used in components with similar functions, such as self-developed plug-ins.

 

$. Callbacks:

1. Callbacks. Add
2. Callbacks. Remove
3. Callbacks. Has
4. Callbacks. Empty
5. Callbacks. Disable
6. Callbacks. Fire
7. Callbacks. firewith
8. Callbacks. Fired
9. Callbacks. Lock
10. Callbacks. Locked

 

1. Callbacks. Add add a function to the callback queue

Function fn1 () {console. log (1)} function FN2 () {console. log (2)} var callbacks = $. callbacks (); // method 1callbacks. add (fn1); // method 2 add multiple callback functions at a time callbacks. add (fn1, FN2); // method 3 transmits the array callbacks. add ([fn1, FN2]); // Method 4 function and array blending callbacks. add (fn1, [FN2]);
 

When an array is passed in, the Add function is used internally to determine whether a private add function is recursively called if an array is used. In addition, note that the add method is not duplicated by default. For example, if you add fn1 twice, the fire will trigger twice. The private add method is interesting. It uses the named function to immediately execute the function and its name is only available in the function. In the circle

 

2. Callbacks. Remove delete a function from the callback queue

 
Function fn1 () {console. log (1)} function FN2 () {console. log (2)} var callbacks = $. callbacks (); callbacks. add (fn1, FN2); callbacks. remove (fn1 );
 

At this time, the fire will only trigger FN2.

 

In addition, the Remove Method deletes all added functions such as fn1. To this end, we also discussed with CMC and Nick about using while instead of if in remove (I thought jquery was wrong at first ). As follows:

VaR callbacks = $. Callbacks (); Callbacks. Add (fn1, FN2, fn1, FN2); Callbacks. Remove (fn1 );
 

In this case, both fn1 values are deleted and FN2 values are triggered only twice during the fire. If is used, only fn1 is deleted once.

 

3. Callbacks. Has can be used to determine whether a callback function has been added.

 
Function fn1 () {console. Log (1)} var callbacks = $. Callbacks (); Callbacks. Add (fn1); If (! Callbacks. Has (fn1) {Callbacks. Add (fn1 );}
 

 

4. Callbacks. Empty clear all callback Functions

 
Function fn1 () {console. log (1)} function FN2 () {console. log (2)} var callbacks = $. callbacks (); callbacks. add (fn1); callbacks. add (FN2); callbacks. empty ();
 

Fire will not trigger any function at this time. Empty function implementation is very simple, just reset the internal queue management object list to an empty array. Here we can learn several ways to clear an array.

 

5. Callbacks. Disable disable this object

Function fn1 () {console. log (1)} function FN2 () {console. log (2)} var callbacks = $. callbacks (); callbacks. disable (); callbacks. add (fn1); // callbacks does not work. add (FN2); // callback does not work. remove (fn1); // callbacks does not work. fire (); // does not work
 

The add, remove, fire, and other methods do not work after the call. In this method, the queue management object list, stack, and memory are not set to undefined.

 

6. Callbacks. Fire actively triggers the Add callback function

 
Function FN () {console. log (this); // The context is callbacks console. log (arguments); // [3]} var callbacks = $. callbacks (); callbacks. add (FN); callback. fire (3 );
 

As mentioned above, the fire method is used to trigger the callback function. The default context is the callbacks object. You can also pass parameters to the callback function.

 

7. Callbacks. firewith is the same as fire, but the execution context can be specified.

Function FN () {console. log (this); // The context is person console. log (arguments); // [3]} var person = {Name: 'jack'}; var callbacks = $. callbacks (); callbacks. add (FN); callback. firewith (person, 3 );
 

In fact, fire calls firewith internally, but only specifies the context as this, and this is the object constructed by $. callbacks.

 

8. Callbacks. Fired determine whether the trigger has been actively performed (call the fire or firewith method)

 
Function fn1 () {console. log (1)} var callbacks = $. callbacks (); callbacks. add (fn1); callbacks. fired (); // falsecallbacks. fire (); callbacks. fired (); // true
 

NOTE: If fire or firewith is called once, true is returned.

 

9. Callbacks. Lock lock queue status

 

10. Callbacks. Locked determines whether the lock is in the locked state.

 

 

$. The flags parameter that can be configured during callbacks construction is optional. The string types are separated by spaces, including the following:

1. Once
2. Memory
3. Unique
4. Stoponfalse

 

1. Once ensure that the callback function is executed only once

 
Function FN () {console. log (1)} var callbacks = $. callbacks ('server'); callbacks. add (FN); callbacks. fire (); // print 1callbacks. fire (); // FN is no longer triggered
 

 

2. Memory memories callbacks

 
Function fn1 () {console. log (1)} function FN2 () {console. log (2)} var callbacks = $. callbacks ('memory '); callbacks. add (fn1); callbacks. fire (); // you must first use firecallbacks. add (FN2); // FN2 is triggered immediately.
 

Memory is a bit difficult. It is meant to be a memory. Actually, it is a bit strange to use. It should be combined with specific scenarios (such as jquery. Deferred ). After the fire is called for the first time, each add operation will be triggered immediately. For example, first Callbacks. Fire () and then Callbacks. Add (fn1), then fn1 will be called immediately.

 

If it is added in batches, it will also be triggered.

Function fn1 () {console. log (1)} function FN2 () {console. log (2)} function fn3 () {console. log (3)} var callbacks = $. callbacks ('memory '); callbacks. add (fn1); callbacks. fire (); callbacks. add ([FN2, fn3]); // output 2, 3
 

 

3. Unique remove repeated callback Functions

 
Function fn1 () {console. log (1)} function FN2 () {console. log (2)} var callbacks = $. callbacks ('unique'); callbacks. add (fn1); callbacks. add ([fn1, FN2]); // Add fn1callbacks again. fire (); // output 1, 2
 

This is easy to understand. Previously, we used has to determine de-duplication. It is more convenient to use the unique attribute. In this example, fn1 is added first, and deduplication is performed internally when fn1 is added again. Therefore, only "1, 2" instead of "1, 1, 2" is output in the final fire ".

 

4. When the stoponfalse callback function returns false, the iteration of the interrupt callback queue is interrupted.

Function fn1 () {console. log (1)} function FN2 () {console. log (2) return false // note here} function fn3 () {console. log (3)} var callbacks = $. callbacks ('stoponfalse'); callbacks. add (fn1, FN2, fn3); callbacks. fire (); // output 1, 2
 

The property name can tell its intention, that is, the callback function uses return false to stop subsequent callback execution. Three callbacks are added in this example. In FN2, return false is used. When the fire is executed to FN2, the execution is stopped, and subsequent fn3 will not be called.

 

Use $. callbacks to implement the observer Mode

// Observer mode var observer = {hash :{}, Subscribe: function (ID, callback) {If (typeof ID! = 'String') {return} If (! This. hash [ID]) {This. hash [ID] = $. callbacks () This. hash [ID]. add (callback)} else {This. hash [ID]. add (callback) }}, publish: function (ID) {If (! This. hash [ID]) {return} This. hash [ID]. fire (ID) }}// subscribe to observer. subscribe ('mailarrived', function () {alert ('sent to')}) Observer. subscribe ('mailarrived', function () {alert ('sent again ')}) Observer. subscribe ('mailsend', function () {alert ('mail successfully')}) // publish setTimeout (function () {observer. publish ('mailarrived')}, 5000) setTimeout (function () {observer. publish ('mailsend')}, 10000)
 

 

Note: The read version is 1.8.3.