javascript - jQuery 销毁和创建定时器函数。如何销毁？

Question

我整理了一些代码来在用户每次按下“保存更改”后关闭模态窗口时重置和重新启动计时器。

我遇到的问题是，当我第二次打开模态窗口并再次按“保存更改”时，它会关闭，但会在第一个计时器之上启动第二个计时器。此效果可无限叠加。

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

感谢您的帮助。

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

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.customTimer 的键存储在 jQuery 对象中。

我修改了你的 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)
};