Question

在按下Save Changes后，每次用户关闭模态窗口时，我都会放置一些代码来重置并重新启动计时器。

我遇到的问题是当我第二次打开Modal并再次按Save Changes时， 它会关闭，但它会在第一个计时器之上启动第二个计时器。这种效果无限期地叠加..

如何根据需要更改我的代码以销毁第一个计时器并创建第二个计时器等等？

感谢您的帮助。

模态JavaScript代码

$(document).on('click', '#btn-modal1-save-changes', function (e) {
//$(this.form).submit();
    alert('btn-modal1-save-changes Click for #modal1 Event fired.');
//$('#modal1').modal('hide');
    $('#total-clock').timer();
});

计时器JQuery自定义函数

// Timer Custom function
jQuery.prototype.timer = function() {

    // Timer variable for setInterval.
    var timer;

    // Target html tag for timer
    var htmlTag = (this);

    // Integer increment    
    var i = 0;

    // Activate Timer   
    timer = setInterval(function() {

        // Always increment by 1;
        i++;

        // Output...
        htmlTag.text(i.toHHMMSS());

    }, 1000); // ..every 1 second(s)
};


// Format String Custom function
// Input type MUST BE INTERGER.
Number.prototype.toHHMMSS = function () {

    var seconds = Math.floor(this),
    hours = Math.floor(seconds / 3600);
    seconds -= hours*3600;
    var minutes = Math.floor(seconds / 60);
    seconds -= minutes*60;

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}

    return hours+':'+minutes+':'+seconds;

}

Answer 1

您需要将计时器存储为变量，即使在jQuery.prototype.timer执行完毕后也可以访问该变量。执行此操作的一种好方法是将其作为jQuery对象的密钥存储为jQuery.customTimer。

我已修改您的jQuery.prototype.timer功能以使用此功能，如下所示。

// Timer Custom function
jQuery.prototype.timer = function() {
    // Target html tag for timer
    var htmlTag = (this);

    // Integer increment
    var i = 0;

    // Clear old timer if exists
    if (jQuery.customTimer)
        clearInterval(jQuery.customTimer);

    // Create timer
    jQuery.customTimer = setInterval(function() {
        // Always increment by 1;
        i++;

        // Output...
        htmlTag.text(i.toHHMMSS());
    }, 1000); // ..every 1 second(s)
};

Answer 2

在函数内部使用jquery的clearInterval（），然后调用该函数停止。

样品

function stopInterval(){
   clearInterval(timer);
}

jQuery销毁并创建计时器功能。怎么破坏？

2 个答案: