停止jQuery插件 [英] stop a jQuery plugin

问题描述

我最近开始研究我的第一个插件，但是我有点卡住了.我的问题是我的插件启动后，我不知道如何停止它.通过停止它，我的意思是:当我单击#div时，插件将停止，而当我再次单击它时，它将启动:
像这样:

I recently started to work on my first plugin but i am stuck a little. My problem is that after my plugin starts I don't know how to stop it. And by stop it I mean: when I click on a #div the plugin stops and when I click on it again it starts:
Something like this:

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

});

有什么想法吗?

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

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

And this is my code so far:

(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 );

推荐答案

我猜想是停止功能"，意思是停止间隔计时器.

I presume by "stop the function", you mean stop your interval timer.

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

To do that, you need to store the timer handle in the jQuery object (as a property using this) and then add a new method to stop it.

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

You can do that my changing this line:

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;
}

经过这些更改后，整个代码块如下:

The whole block of code would be this after those changes:

(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之类的名字，说明其含义.

Style-wise, I would recommend that you use meaningful names for your various parameters options instead of param1, param2, param3 and param4. Pick names like count and duration that say what they are.

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

If you want the first click to start the plugin and the second click to stop it, you could make the call to plugin() alternate between starting and stopping with this code:

(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 );

这篇关于停止jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！