Stop A Jquery Plugin

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

Solution 1:

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

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

to this:

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

and this line:

clearInterval(timer);

to this line:

clearInterval(this.pluginTimer);

And, then adding this method:

$.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;

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

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

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

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

})( jQuery );

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.

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 returnif (this.pluginTimer) { 
            this.stopPlugin();
            returnthis;
        }
        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() { returnthis.id.match('frame' + counter); })   
                .show();
            if(counter == params.param2) {
                counter = 0;
                showTimes --;
                if(showTimes == 0) {
                   this.stopPlugin();
                }
            } else {
               counter++;
            }
        }
        returnthis;
    };

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

})( jQuery );

Solution 2:

Here is one issue I found right from the start that likely explains your issue:

Your initial value for showTimes is 0 Later in your code you decrement this value based on a condition:

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

So, assuming no other changes to showTimes between when its value is set and the conditional decrement, its value will be -1.

Thus, this condition: if(showTimes == 0) will always evaluate to false, and clearInterval is never called.

It's probably also worth noting that you have a typo in your parameter declaration:

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

Specifically: parma2: 5 should be param2: 5 I believe.