停止一个 jQuery 插件答案

【问题标题】：stop a jQuery plugin停止一个 jQuery 插件
【发布时间】：2011-11-28 21:06:33
【问题描述】：

我最近开始开发我的第一个插件，但我有点卡住了。我的问题是插件启动后我不知道如何停止它。停止它的意思是：当我单击 #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 );

【问题讨论】：

“停止功能”是什么意思？此外，我们不是来为您的代码编写改进的；你应该这样做。
你的插件到底是做什么用的？
另外，你的小提琴只包含你的插件代码，没有示例用例，这将有助于理解你的问题，尽管它很模糊。
你们解决问题的速度太快了。他的方法启动了一个间隔计时器，OP 需要知道如何存储该计时器句柄并在以后停止它。我正要回答这个问题，但你们都这么快（不到 7 分钟）关闭了它，现在它不会接受我的回答。是的，问题写的不是很清楚，但是如果你只看引用的代码，你就会明白stop在问题/代码的上下文中是什么意思。
@FrédéricHamidi - 当我说“结束一个问题太快了”时，我是在向所有在问题的前几分钟投票结束的人表达这一点，甚至懒得看参考代码来理解被问到的内容。在提出澄清问题时，在立即投票结束之前让 OP 有一些时间做出回应似乎是合理的。 OP 越新，可能需要更多的时间，因为他们可能不知道要关注直接的 cmets。这是一个措辞不佳的问题，但稍加努力就可以理解。

标签： javascript jquery jquery-plugins

【解决方案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 );

【讨论】：

感谢您的帮助，但“停止功能”是指当我单击#div 时，插件会停止，再次单击它会再次运行。很抱歉造成误解，但我是一个 jQuery 菜鸟。
@nmsdvid - 混淆与您的 jQuery 知识无关。你还没有清楚地描述这个问题。您需要回到您的问题，使用编辑按钮并告诉我们它应该如何工作。第一次点击应该发生什么？间隔计时器应该发生什么？间隔计时器应该运行多长时间？如果再次点击会发生什么？
@nmsdvid - 我添加了一个选项，其中调用 plugin() 将在启动和停止之间交替，因此第一次单击将开始，第二次单击将停止。如果你想要一些不同的东西，那么你必须更清楚地描述你想要什么。我即将完成尝试猜测您希望它如何工作。

【解决方案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 我相信。

【讨论】：