温故而知新之JQuery-CallBack

今天药忘吃喽~ 2022-06-12 04:06 181阅读 0赞

## Callback ##

低版本应该没有Jquery这个callback

CallBack到底有什么用呢？其实就是回掉，当别人外部动态传一个函数过来，你执行完毕你的代码之后就调用一下别人的函数，典型的就是ajax，javascript原生可以使用call和apply实现类似效果，如果对call和apply不清楚的，可以去深入了解，这里不累赘

### callbacks.add ###

加入到回掉函数集合里面

CallBack基本用法：

var foo = function( value ){ 
        console.log( 'foo:' + value);
    }
    var callbacks = $.Callbacks();
    
    callbacks.add( foo );
    
    callbacks.fire("hello");    //output foo:hello

上面这段代码，`callbacks.fire("hello");`就会触发执行一次`foo`方法，输出`foo:hello`

function test(value, callBackFun) { 
        var callbacks = $.Callbacks();
        callbacks.add( callBackFun );
        callbacks.fire(value);    //output foo:hello
    }
    
    test('Nickwu', function(value) { 
        console.log('My name is '+ value);
    });
    
    //运行，输出：My name is Nickwu

可以看到，也是巧妙的执行了Fun回调函数

继续看Demo

function fn1( value ){ 
        console.log( value );
    }
    
    function fn2( value ){ 
        fn1("fn2 says:" + value);
        return false;
    }
    
    var callbacks = $.Callbacks();
    callbacks.add( fn1 );
    callbacks.fire( "foo!" ); // outputs: foo!
    
    callbacks.add( fn2 );
    callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

var callbacks = $.Callbacks();
    callbacks.add( fn1 );
    callbacks.fire( "foo!" ); // outputs: foo!
    
    callbacks.add( fn2 );
    callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!
    
    callbacks.remove(fn2);
    callbacks.fire( "foobar" ); 
    
    // only outputs foobar, as fn2 has been removed.

### callbacks.fired() ###

判断是否执行了回调函数

### callbacks.disable() ###

禁用回调函数

### callbacks.empty() ###

清空回调函数集合里面所有的函数集合

### callbacks.fire() ###

执行集合里面的函数，可带参数

### callbacks.has() ###

判断是否存在这个回调函数

### callbacks.lock() ###

锁定集合里面的回调函数