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。

发布了25 篇原创文章 · 获赞 46 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/huster1446/article/details/53583726