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和param4。选择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 );

Answer 2

以下是我从一开始就发现的一个可能解释您问题的问题：

showTimes的初始值为0 稍后在您的代码中，您将根据条件减少此值：

if(counter == params.param2){
   counter = 0;
   showTimes --;
   if(showTimes == 0)
       clearInterval(timer);
}else{
   counter++; 
}

因此，假设showTimes在设置其值和条件递减之间没有其他更改，则其值将为-1。

因此，此条件：if(showTimes == 0)将始终评估为false，并且永远不会调用clearInterval。

可能还值得注意的是，参数声明中有拼写错误：

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

具体来说：parma2: 5应该是param2: 5我相信。

停止一个jQuery插件

2 个答案: