为什么我的 window.setInterval 函数在多次调用时会在 DOM 中重叠？答案

【问题标题】：Why is my window.setInterval function overlapping itself in the DOM when called multiple times?为什么我的 window.setInterval 函数在多次调用时会在 DOM 中重叠？
【发布时间】：2018-12-19 17:41:47
【问题描述】：

我正在尝试构建自己的计时器，该计时器会在单击 nextTeam 按钮后重置为 7 分钟。但是，计时器在每次调用时都会重叠，而不是重置。这会导致计时器在每个函数调用的显示时间之间来回翻转。

任何关于修复的建议将不胜感激！

HTML：

<div>
    <div id="clock"><span id="minutes">7</span>:<span id="seconds">00</span></div>
    <button id="nextTeam"onclick="showNextTeam()" type="button">next team</button>  
</div>

JS：

function showNextTeam() {
    clock(7, 0);
}

var clock = function(minutes, seconds) {
    window.setInterval(() => {
        seconds--
        if (seconds < 0) {
            minutes--;
            seconds = 59;
        }

        document.getElementById("minutes").textContent = minutes;

        if (seconds < 10) {
            document.getElementById("seconds").textContent = "0" + seconds;
        }
        else {
            document.getElementById("seconds").textContent = seconds;
        }
    }, 1000);
};

【问题讨论】：

标签： javascript function

【解决方案1】：

您正在创建同时运行的多个间隔。当您重置间隔时，您需要对setInterval 返回的值调用clearInterval()。一个简单的方法是在函数范围之外创建一个变量并将间隔句柄保存在那里。

let interval;
function showNextTeam() {
    clock(7, 0);
}

var clock = function(minutes, seconds) {
    clearInterval(interval) //clear the old one first
    interval = window.setInterval(() => {
        seconds--
        if (seconds < 0) {
            minutes--;
            seconds = 59;
        }

        document.getElementById("minutes").textContent = minutes;

        if (seconds < 10) {
            document.getElementById("seconds").textContent = "0" + seconds;
        }
        else {
            document.getElementById("seconds").textContent = seconds;
        }
    }, 1000);
};

<div>
    <div id="clock"><span id="minutes">7</span>:<span id="seconds">00</span></div>
    <button id="nextTeam"onclick="showNextTeam()" type="button">next team</button>  
</div>

【讨论】：