Question

我创建了类似的插件

计时器插件

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

我就像这样调用插件。

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

我在timerpage.php调用了该插件。当我通过单击另一个菜单将页面更改为xxx.php时，计时器间隔仍在运行，我需要清除计时器间隔。

我使用jquery ajax load创建了一个网页。所以当我换到另一个菜单时，我的页面并不令人耳目一新。

我的问题是，当我点击另一个菜单时，如何清除计时器间隔或破坏插件？

Answer 1

而不是var timerIntval;在timerInterval对象上设置变量window，而是在下次刷新之前访问此变量。

window.timerIntval = setInterval(function() {

然后，当用户点击任何项目菜单时，您可以清除它：

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

实例（多个间隔）

$('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>

请注意，它有点冒险，因为你只能运行一次，否则第二个的间隔id将覆盖第一个。

Answer 2

请尝试以下修改：

计时器插件：

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

现在在其他一些JS代码中，它将改变div内容

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

要清除与多个DOM元素关联的计时器，您可以查看以下代码：

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

希望这会给出处理这种情况的想法。

jquery插件之外的clearinterval（）

2 个答案: