javascript - 停止 jQuery 插件

Question

我最近开始开发我的第一个插件，但我有点卡住了。我的问题是，插件启动后我不知道如何停止它。我所说的停止是指:当我单击 #div 时，插件会停止，当我再次单击它时，它会启动:
像这样的事情:

$("#div").click(function(){
    $(this).plugin(); // starts the plugin

});

有什么想法吗？

这是一个演示:http://jsfiddle.net/nmsdvid/hmDyR/

这是我到目前为止的代码:

(function( $ ) {
  $.fn.plugin = function(params) {
  params = $.extend( {param1: 10, parma2: 5, param3:0, param4:100}, params);

  var timer = setInterval( plugin, params.param1);
  var showTimes = params.param3;
  var counter = 0;

  function plugin() {
    for (var i = 0; i < params.param2; i++) {
     // code
    }

   if (counter == 0) { counter++; return; }

    $('#div')
      .stop()
      .hide()
      .filter( function() { return this.id.match('frame' + counter); })   
      .show();
    if(counter == params.param2){
       counter = 0;
       showTimes --;
       if(showTimes == 0)
           clearInterval(timer);
    }else{
       counter++;
    }
  }
  return this;
  };

})( jQuery );

Answer 1

我认为“停止该功能”，你的意思是停止你的间隔计时器。

为此，您需要将计时器句柄存储在 jQuery 对象中(使用 this 作为属性)，然后添加一个新方法来停止它。

您可以通过更改此行来做到这一点:

var timer = setInterval( plugin, params.param1);

对此:

this.pluginTimer = setInterval( plugin, params.param1);

这一行:

clearInterval(timer);

到这一行:

clearInterval(this.pluginTimer);

然后添加这个方法:

$.fn.stopPlugin = function() {
    clearInterval(this.pluginTimer);
    this.pluginTimer = null;
}

这些更改后的整个代码块将是这样的:

(function( $ ) {
    $.fn.plugin = function(params) {
        params = $.extend( {param1: 10, param2: 5, param3:0, param4:100}, params);

        this.stopPlugin();    
        this.pluginTimer = setInterval( plugin, params.param1);
        var showTimes = params.param3;
        var counter = 0;

        function plugin() {
            for (var i = 0; i < params.param2; i++) {
             // code
            }

            if (counter == 0) { counter++; return; }

            $('#div')
                .stop()
                .hide()
                .filter( function() { return this.id.match('frame' + counter); })   
                .show();
            if(counter == params.param2) {
                counter = 0;
                showTimes --;
                if(showTimes == 0) {
                   this.stopPlugin();
                }
            } else {
               counter++;
            }
        }
        return this;
    };

    $.fn.stopPlugin = function() {
        if (this.pluginTimer) {
            clearInterval(this.pluginTimer);
            this.pluginTimer = null;
        }
    }

})( jQuery );

就风格而言，我建议您为各种参数选项使用有意义的名称，而不是 param1、param2、param3 和 参数4。选择像 count 和 duration 这样能说明其含义的名称。

如果您希望第一次单击启动插件，第二次单击停止它，您可以使用以下代码在启动和停止之间交替调用plugin():

(function( $ ) {
    $.fn.plugin = function(params) {
        params = $.extend( {param1: 10, param2: 5, param3:0, param4:100}, params);

        // if the timer was already running, then stop it and return
        if (this.pluginTimer) { 
            this.stopPlugin();
            return this;
        }
        this.pluginTimer = setInterval( plugin, params.param1);
        var showTimes = params.param3;
        var counter = 0;

        function plugin() {
            for (var i = 0; i < params.param2; i++) {
             // code
            }

            if (counter == 0) { counter++; return; }

            $('#div')
                .stop()
                .hide()
                .filter( function() { return this.id.match('frame' + counter); })   
                .show();
            if(counter == params.param2) {
                counter = 0;
                showTimes --;
                if(showTimes == 0) {
                   this.stopPlugin();
                }
            } else {
               counter++;
            }
        }
        return this;
    };

    $.fn.stopPlugin = function() {
        if (this.pluginTimer) {
            clearInterval(this.pluginTimer);
            this.pluginTimer = null;
        }
    }

})( jQuery );