Demo of Jquery.callbacks

Jquery.callbacks was added after the 1.7 version of jquery, which was extracted from the _deferred object in version 1.6, and is used primarily for functions such as add, remove, fire, lock, and so on, and provides once, memory, Unique, stoponfalse four option for some special controls, this is the official document of jquery: http://api.jquery.com/jQuery.Callbacks/

The common application scenario for this function is the event triggering mechanism, which is the observer in the design pattern (publish, subscribe mechanism), currently callbacks object for queue, Ajax, deferred object, this article is mainly some simple demo:

1, do not pass any parameters, call add when the function add to the internal list, call Fire when the order triggers the callback function in the list

function Fn1 (val) {    console.log (' fn1 says: ' + val);} function fn2 (val) {    console.log (' fn2 says ' + val);} var CBS = $. Callbacks (); Cbs.add (FN1); //fn1 says:foocbs.fire (' foo '); Cbs.add (fn2);  fn1 Says:bar//fn2 says Barcbs.fire (' bar ');           

2, the constructor passed in once, the callback function list is only fire once

function Fn1 (val) {    console.log (' fn1 says ' + val);} var CBS = $. Callbacks (' once '); Cbs.add (FN1);  fn1 says Foo cbs.fire (' foo '); Cbs.fire (' foo ');      

3, the constructor into the memory, this option is just beginning to touch a little confusing, take a specific example below to illustrate

function Fn1 (val) {    console.log (' fn1 says ' + val);} function fn2 (val) {    console.log (' fn2 says ' + val);} var CBS = $. Callbacks (' Memory '); Cbs.add (FN1);
The first fire caches incoming parameters
fn1 says Foocbs.fire (' foo ');
Once the fire has passed, the fire will be automatically called by the subsequent add, and the incoming parameter is the ' foo ' from the last fire.
fn2 says Foocbs.add (FN2);
The parameters of this fire are newly introduced ' bar '
FN1 says bar
fn2 says Barcbs.fire (' bar ');

4, the constructor passed to unique, to ensure that there is no duplicate function in the Add process

function Fn1 (val) {    console.log (' fn1 says ' + val);} var CBS = $. Callbacks (' unique '); Cbs.add (FN1); Cbs.add (FN1) ; Although added two times, there is only one output //fn1 says Foo cbs.fire (' foo ')  because of this unique option;     

5, the constructor passed in Stoponfalse, when the function list is called, if the return value of a function is false, then break

functionFn1 (val) {console.log (' fn1 says ' +function Fn2 (val) {console.log (' fn2 says ' + Val); return false; function Fn3 (val) {console.log (' fn3 says ' + val);} var CBS = $. Callbacks (' Stoponfalse ' // Although add three functions, but because the return value of FN2 is false, fn3 This function will not be executed //< Span style= "color: #008000;" >fn1 says Foo//fn2 says Foocbs.fire (' foo ');   

Here are some of the single-option demo, here are some examples of composite options

6, once, memory combination, this is also jquery deferred object initialization of most of the callbacks object parameters (why deferred will use this pair of combinations?). Because this object can only be resolve or reject once, changing to a successful or failed state can not be changed again, so the fire can not be displayed again, but only by add to continue the way)

function Fn1 (val) {console.log (' fn1 says ' +function Fn2 (val) {console.log (' fn2 says ' + val);} var CBS = $. Callbacks (' Once memory ' fn1 says Foo cbs.fire (' foo '  //fn2 says foo  Cbs.add (fn2) // Because of once, the call fire will not execute if you still want fire, Only Addcbs.fire (' Bar ');               

7. Combination of Memory Stoponfalse

functionFn1 (val) {console.log (' fn1 says ' +val);}functionFn2 (val) {console.log (' fn2 says ' +Val);ReturnFalse;}functionFn3 (val) {console.log (' fn3 says ' +var CBS = $. Callbacks (' Stoponfalse memory ' //// fn1 says foo //fn2 says Foo cbs.fire (' foo ' fn3, FN2, fn3] The red function will not execute //fn1 says Bar//fn2 says Barcbs.fire (' bar ');         

This article is mainly a few option applications, the next time the source code will be interpreted, and then for the source code to design a few more advanced applications, please look forward to