clearinterval() outside of jquery plugin

Question

I create plugin something like this

timer plugin

(function($) {

    $.fn.timer = function(options) {

        var defaults = {
            seconds: 60
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            var seconds = options.seconds;
            var $this = $(this);

            var timerIntval;

            var Timer =  {
                setTimer : function() {
                    clearInterval(timerIntval);
                    if(seconds <= 0) {
                        alert("timeout");
                    }else {
                        timerIntval = setInterval(function(){
                            return Timer.getTimer();
                        }, 1000);
                    }
                },
                getTimer : function () {
                    if (seconds <= 0) {
                        $this.html("0");
                    } else {
                        seconds--;
                        $this.html(seconds);
                    }
                }
            }

            Timer.setTimer();
        });
    };
})(jQuery);

and I call the plugin like this.

$(".myTimer").timer({
    seconds : 100
});

i called the plugin at timerpage.php. When i changed the page to xxx.php by clicking another menu, the timer interval is still running and i need to the clear the timer interval.

i created a webpage using jquery ajax load. so my page was not refreshing when i change to another menu.

my question is, how to clear the timer interval or destroy the plugin when i click another menu?

Answer 1

Instead of var timerIntval; set the variable timerInterval on the window object, then you will have the access this variable until the next refresh.

window.timerIntval = setInterval(function() {

Then when the user clicks on any item menu you can clear it:

$('menu a').click(function() {
  clearInterval(window.timerIntval);
});

Live example (with multiple intervals)

$('menu a').click(function(e) {
  e.preventDefault();
  console.log(window.intervals);
  for (var i = 0; i < window.intervals.length; i++) {
    clearInterval(window.intervals[i]);    
  }
});

(function($) {

  $.fn.timer = function(options) {

    var defaults = {
      seconds: 60
    };

    var options = $.extend(defaults, options);

    return this.each(function() {
      if (!window.intervals) {
        window.intervals = [];  
      }
      
      var intervalId = -1;
      var seconds = options.seconds;
      var $this = $(this);

      var Timer =  {
        setTimer : function() {           
          clearInterval(intervalId);
          if(seconds <= 0) {
            alert("timeout");
          } else {
            intervalId = setInterval(function(){
              //Timer.getTimer();
              return Timer.getTimer();
            }, 1000);
            window.intervals.push(intervalId);
          }
        },
        getTimer : function () {
          if (seconds <= 0) {
            $this.html("0");
          } else {
            seconds--;
            $this.html(seconds);
          }
        }
      }

      Timer.setTimer();
    });
  };
})(jQuery);

$(".myTimer").timer({
    seconds : 100
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<menu>
  <a href="#">Menu 1</a>
</menu>

<div class="myTimer"></div>
<div class="myTimer"></div>

Just notice that it's little bit risky because you can only run it once otherwise the interval id of the second will override the first.

Answer 2

Please try with following modifications:

timer plugin:

(function($) {

    $.fn.timer = function(options) {

        var defaults = {
            seconds: 60
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            var seconds = options.seconds;
            var $this = $(this);

            var timerIntval;

            var Timer =  {
                setTimer : function() {
                    clearInterval(timerIntval);
                    if(seconds <= 0) {
                        alert("timeout");
                    }else {
                        timerIntval = setInterval(function(){
                            return Timer.setTimer();
                        }, 1000);

                        $this.data("timerIntvalReference", timerIntval); //saving the timer reference for future use
                    }
                },
                getTimer : function () {
                    if (seconds <= 0) {
                        $this.html("0");
                    } else {
                        seconds--;
                        $this.html(seconds);
                    }
                }
            }

            Timer.setTimer();
        });
    };
})(jQuery);

Now in some other JS code which is going to change the div content

var intervalRef = $(".myTimer").data("timerIntvalReference"); //grab the interval reference
clearInterval(intervalRef); //clear the old interval reference

//code to change the div content on menu change

For clearing timer associated with multiple DOM element, you may check below code:

//iterate ovel all timer element:
$("h3[class^=timer]").each(function(){
    var intervalRef = $(this).data("timerIntvalReference"); //grab the interval reference
    clearInterval(intervalRef);
});

Hope this will give an idea to deal with this situation.