Почему моя функция window.setInterval перекрывает себя в DOM при многократном вызове?

Question

Я пытаюсь создать свой собственный таймер, который сбрасывается до 7 минут после нажатия кнопки nextTeam.Однако таймер перекрывается при каждом вызове, а не сбрасывается.Это заставляет таймер переключаться между отображаемым временем для каждого вызова функции.

Буду признателен за любые рекомендации по исправлению!

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);
};

Answer 1

Вы создаете несколько интервалов, работающих одновременно.При сбросе интервала вам нужно вызвать clearInterval() на значение, возвращаемое setInterval.Самый простой способ сделать это - создать переменную вне области функций и сохранить там указатель интервала.

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>