jQuery中toggle方法实现多个函数轮流执行

最近在看锋利的jQuery一书,发现不能像书中所说用toggle方法来实现点击轮流执行多个函数。
查了一下发现jQuery1.9版本之后删除了toggle上述功能,只保留了隐藏的功能。个人觉得很不理解,这么好的一个功能咋说没就没了呢,于是便想何不自己来实现,写一个myToggle呢?
首先说一下myToggle函数:被一个jquery对象实例调用,可以接收多个函数做参数,当每次点击该实例对象时,轮流执行参数中的函数;
下面是源码:

$.prototype["myToggle"] = function () {
    var args = arguments;
    var that = this;
    var i = 0;
    var n = args.length;

    this.click(function () {
        var func = args[i%n];
        if (typeof func === 'function') {
            func.call(that);        
        }
        i += 1;

        return false;
    });
};

使用示例

<button id='btn'></button>
$('#btn').myToggle(func1, func2)

代码很简单也很好理解,通过给jquery原型对象增加myToggle方法,所有的jquery对象都能调用该方法。判断参数类数组arguments中的参数是否是函数来选择是否要执行。并通过i%n来循环选择参数。
然后就是注意的地方,首先要用args来保存arguments,因为接下来要进入click内部的函数,不保存的话arguments就是那个匿名函数的参数类数组了,而且要确保调用func的对象是我们所设置的对象,所以使用func.call(that)来调用func函数,这里不用this涉及到闭包的知识,此时this是widow对象。
最后一点是该函数还存在一个问题,传入的func参数在执行时是异步的,这就有个问题,click不会等到func函数执行完才接着执行。如果func函数内部本来是return false想让一个链接不发生跳转,则这个return false没来的及返回click函数就有可能已经让该链接跳转了。所以我在click尾部增加了return false。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值