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

I have put together some code to reset and restart a timer every time the user closes a modal window after pressing Save Changes.

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

The problem I'm having is when I open the Modal for the second time and press Save Changes for a second time, it closes but it starts a second timer on top of the first one. This effect stacks indefinitely..

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

How can I change my code to destroy the first timer and create a second timer and so on, as needed, throughout the day?

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

Thanks for any help.

谢谢你的帮助。

Modal JavaScript Code

模态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 Custom functions

Timer JQuery Custom函数

// 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;

}

2 个解决方案

#1

You need to store the timer as a variable which can be accessed even after jQuery.prototype.timer has finished executing. A good way to do this, is store it as a key in the jQuery object as jQuery.customTimer.

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

I've modified your jQuery.prototype.timer function to make use of this as shown below.

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

#2

use jquery's clearInterval() inside function then call the function to stop.

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

sample

样品

function stopInterval(){
   clearInterval(timer);
}

#1