остановить плагин jQuery

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, которые говорят, что они есть.

Если вы хотите, чтобы первый клик запускал плагин, а второй щелчок, чтобы остановить его, вы можете сделать так, чтобы вызов плагина () чередовался между запуском и остановкой с помощью этого кода:

(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 Я считаю.