停止一个jQuery插件

我最近开始研究我的第一个插件但是我被卡住了一点。 我的问题是，在我的插件启动后，我不知道如何阻止它。 并且通过停止它我的意思是：当我点击#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

我假设“停止function”，你的意思是停止你的间隔计时器。

为此，您需要将计时器句柄存储在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我相信。