jquery 插件之外的 clearinterval()

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 加载创建了一个网页。所以当我切换到另一个菜单时，我的页面没有刷新。

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

Answer 1

而不是 var timerIntval; 在 window 对象上设置变量 timerInterval，然后您将可以访问该变量直到下一次刷新。

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

clearinterval() outside of jquery plugin

javascript

jquery

jquery-plugins

setinterval