$.Callbacks的基本使用

jquery提供了一个$.callback的工具方法，可以用来管理函数，应用场景多用于用来管理回调函数。

基本使用

$.Callbacks对象

var callback = $.Callbacks()

在控制台打印callback可以看到对象内部的方法：

$.callback对象常用的方法

使用下列方法前，记得先引入jquery库！

add(fn[必填])

添加函数到调用列表

<script>
   var callback = $.Callbacks() 
   var one = function(){
       console.log('one')
   } 
   callback.add(one) 
   //把one函数添加到callback的调用列表中，等待被调用
</script>

fire(参数[非必填])

调用添加在列表中的函数

<script>
   var callback = $.Callbacks() 
   var one = function(){
       console.log(arguments[0]) //打印第一个实参
   } 
   callback.add(one) 
   callback.fire() //打印结果：undefined
   callback.fire('a')  //打印结果：a
  
   //callback调用列表中只添加了one函数
   //因此只会调用one函数  
   //第一个fire()没有传参数 所以打印一个实参为undefined
   //第二个fire()传了'a' 所以打印结果为a   
</script>

remove(fn[必填])

移除已添加在调用列表的函数

<script src="./jquery-3.4.1.min.js"></script>
<script>
    var callback = $.Callbacks() 
    var one = function(){
        console.log('one') 
    } 
    var two = function(){
        console.log('two')
    }
    var three = function(){
        console.log('three')
    }
    callback.add(one,two,three) 
    callback.remove(one) //从调用列表里面移除one函数
    callback.fire() //打印结果：two three   
</script>

disable()

<script>
    var callback = $.Callbacks() 
    var one = function(){
        console.log('one') 
    } 
    callback.add(one) 
    callback.disable() //禁止调用callback对象调用列表中的函数
    callback.fire() //打印结果：什么都没有输出
    // 禁用后相当于禁用了后续fire的使用  
</script>

$.callback对象的五种模式

$.callback方法中可以填入特定四种参数来决定操作的模式。

正常模式

var callback = $.Callbacks() 
//不传任何参数
//以上的演例均是正常模式

once模式

只允许调用一次fire

<script>
    var callback = $.Callbacks('once') 
    var one = function(){
        console.log('one')
    } 
    callback.add(one) 
    callback.fire() //打印结果：one
    callback.fire() //无效
</script>

memory模式

fire之后，添加的函数都会自动调用。

<script>
    var callback = $.Callbacks('memory') 
    var one = function(){
        console.log('one') 
    } 
    var two = function(){
        console.log('two') 
    }
    callback.add(one) 
    callback.fire() //打印结果：one
    callback.add(two)  //打印结果：two
</script>

unique模式

重复添加的函数，只会调用一次。

<script>
    var callback = $.Callbacks('unique') 
    var one = function(){
        console.log('one') 
    } 
    callback.add(one) 
    callback.add(one) 
    callback.fire() //打印结果：one
    //添加了两次one函数，但只会调用一次
</script>

stopOnFalse模式

函数的调用顺序，是根据添加执行的，但是遇到返回值为false的函数，就不会再往下调用。

<script>
    var callback = $.Callbacks('stopOnFalse') 
    var one = function(){
        console.log('one') 
    } 
    var two = function(){
        console.log('two') 
    } 
    var three = function(){
        console.log('three') 
        return false
    }
    var four = function(){
        console.log('four') 
    }
    callback.add(one,two,three,four) 
    callback.fire() //打印结果：one two three
    // 函数three返回值为false 
    // 因此不会再调用列表中的函数,因而four没有被调用
</script>

以上就是$.callback基本使用，下面通过案例介绍一下用法。
案例：

var master = function(timer){
        console.log('你是最棒的')
        clearInterval(timer)
    }

    var good = function(timer){
        console.log('还不错')
        clearInterval(timer)
    }

    var loser = function(){
        console.log('太差劲了')
    }

    //定义回调函数对象
    var success = $.Callbacks() 
    var progress = $.Callbacks() 
    var error = $.Callbacks()

    // 注册不同状态调用的对象
    success.add(master)
    progress.add(good)
    error.add(loser)

    // 通过定时器异步任务,调用不同的回调函数
    var timer = setInterval(function(){
        var num = Math.random()*100
        if(num > 85){
            success.fire(timer)
        }else if(num < 60){
            error.fire()
        }else{
            progress.fire(timer)
        }
    },1500)

以上案例是为了简单示例$.Callbacks应用，在实际setInterval中，可直接触发函数，不必通过fire的方式触发回调函数。