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

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

Answer 1

请尝试进行以下修改:

定时器插件:

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

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