Javascript 重置计数器OnClick

我有一些代码，我用它来倒数15秒后，15秒过去，它回声“倍过”。问题是，如果有人单击两次，同一分区中将有两个计数器。如果有人再次单击按钮，我需要重置计数器

function startCountDown(i, p, f) {
    // store parameters
    var pause = p;
    var fn = f;
    // make reference to div
    var countDownObj = document.getElementById("countDown");
    if (countDownObj == null) {
        // error
        alert("div not found, check your id");
        // bail
        return;
    }
    countDownObj.count = function (i) {
        // write out count
        countDownObj.innerHTML = i;
        if (i == 0) {
            // execute function
            fn();
            // stop
            return;
        }
        setTimeout(function () {
            // repeat
            countDownObj.count(i - 1);
        },
        pause);
    }
    // set it going
    countDownObj.count(i);
}

function myFunction() {
    alert("Time Over");
} 

HTML:

定时器
开始时间

setTimeout

向计时器返回一个可与

窗口一起使用的id。clearTimeout

。最简单的解决方案是创建一个全局

timerId

var timerId; 
...

function startCountDown(i, p, f) { 
    ...
    if (timerId) { window.clearTimeout(timerId); }
    timerId = window.setTimeout(...);

---

将超时设置为全局变量，如下所示：

timer = setTimeout(function(){countDownObj.count(i - 1);},pause);

在函数开始时，清除超时

clearTimeout(timer)

代码：

---

我忘了提到，在函数之前，还必须将timer设置为变量。我在答案中添加的代码对我很有用。我看到这已经得到了相当多的意见。回到我的工作中，我只是不想使用全局变量。我很快就发现这不是问题。尽管ES6处理得更好。

clearTimeout(timer)

var timer;
function startCountDown(i, p, f) {
// store parameters
if(timer){clearTimeout(timer)}
var pause = p;
var fn = f;
// make reference to div
var countDownObj = document.getElementById("countDown");
if (countDownObj == null) {
    // error
    alert("div not found, check your id");
    // bail
    return;
}
countDownObj.count = function (i) {
    // write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
        // execute function
        fn();
        // stop
        return;
    }
timer = setTimeout(function(){countDownObj.count(i - 1);},pause);
}
// set it going
countDownObj.count(i);
}

function myFunction() {
alert("Time Over");
}