Question

我写了很多js脚本＆amp; jQuery插件，所以这里是我困境的浓缩伪编码场景。

假设我们有一个编写良好的jQuery插件，定义了一个传递给我们插件的方法对象。

// OUR HYPOTHETICAL jQUERY PLUGIN
(function($){

var methods = {
    init : function(options){
        var setup = $.extend({
            'speed' : 300,
            'msg' : 'blah'
        }, options)

        return this.each(function(){
            var animation = setInterval(function(){ ... },1000)
            ...
        })

    },
    stop : function(){
        window.clearInterval(animation); // DOES NOT WORK
    }
};

$.fn.somePlugin = function(method){
     // Method calling logic
        if ( methods[method] ) {
          return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
          return methods.init.apply( this, arguments );
        } else {
            $.error( 'Bad Method...' );
        }   
};

})(jQuery)

假设将此插件实例化为div $('#someDiv').somePlugin();

到目前为止，一切都运行正常，我可以致电...... $('#someDiv').somePlugin('stop');

但是， stop 方法的内部无法弄清楚如何访问在插件初始化期间创建的动画属性的实例。

有关如何获取与 #someDiv 绑定的插件相关联的动画变量的特定实例的任何想法。

Answer 1

这不起作用，因为动画var是本地的。使用动画（一个数组）var作为插件属性，因此它将是插件实例的本地属性。我认为使用这种方法可以实现您的需求。

一个例子：

<强> HTML：

<button id="btnStart"/>Start</button>
<button id="btnStop"/>Stop</button>

<强> JavaScript的：

var obj = {
    size: 5,
    animationsId: [],
    start: function() {
        for ( var i = 0; i < this.size; i++ ) {
            this.animationsId[i] = setInterval( function() {
                console.log( "aaa" );
            }, 500 );
        }
    },
    stop: function() {
        for ( var i = 0; i < this.size; i++ ) {
            clearInterval( this.animationsId[i] );
        }
    }
};

$( "#btnStart" ).click(function(){
    obj.start();
});

$( "#btnStop" ).click(function(){
    obj.stop();
});

jsFiddle：http://jsfiddle.net/davidbuzatto/3fDHF/

Answer 2

您可以将间隔标记存储在每个元素的数据中。例如......

var animation = setInterval(function(){ ... },1000)
$(this).data('somePlugin', {animationInterval: animation});

之后您可以访问特定元素...

window.clearInterval($(this).data('somePlugin').animationInterval);

为初始化自定义jQuery插件的属性实例调用clearInterval

2 个答案: