单击按钮时如何结束我的倒数计时器？

Question

我正在尝试创建一个将结束倒数计时器的函数，或者自动使Countdown Timer === 0的分钟和秒部分;但是，似乎使用Clear Interval（时间）似乎不起作用！任何人都可以指出我如何能够实现自己想做的事情！

请注意，我为我的轻松而制作了starterminutes = 1。

以下是倒数功能和html：

// FUNCTION - countDown function that counts down from 8 minutes

const startingMinutes = 1;
let time = startingMinutes * 60;

function updateCountDown() {

    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
        
        seconds = seconds < 1 ? '0' + seconds : seconds;
        document.getElementById("countdown").innerHTML = `${minutes}:${seconds}`;
        time--;
        time = time < 0 ? 0 : time; 
            if (minutes == 0 && seconds == 0) {
                document.getElementById('tableStyle').style.display = "block";
                document.getElementById('wordsIncluded').style.display = "block";
                document.getElementById('show_header_one').style.display = "block";
                recognition.abort(); //speech recognition stops when countdown timer ends
                isListening = false;
            }


//my attempt at clearing the countdowntimer!

        window.addEventListener('DOMContentLoaded', function() {
            document.getElementById("submit_button").addEventListener("click", function() {
                clearInterval(time);
            })});

html：

//where the countdown timer is displayed

<div id="circle"><p id="countdown">8:00</p></div>


//Click the below button and the countdown timer will end (minutes === 0 and seconds === 0)
<button id="submit_button" type="submit">Click to Submit</button>

    

Answer 1

使用 clearinterval setInterval

我在下面使用您的代码，在哪里有一个示例将值从“ setInterval”传递给我称为“间隔”的“ setInterval”到函数“ stop”，该函数“ stop”调用“ clear Interval”以停止计时器，并运行您正在运行的代码。

let isListening = true;
const recognition = { abort: () => console.log('aborted') };

function updateCountDown(time) {
  const minutes = Math.floor(time / 60);
  const seconds = time % 60;
  const timer = document.getElementById("countdown");
  timer.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function start(time) {
  const interval = setInterval(() => {
    if (--time) updateCountDown(time);
    else stop(interval);
  }, 1000);
  document.getElementById("submit_button")
    .addEventListener("click", () => stop(interval))
}

function stop(interval) {
  updateCountDown(0);  // This line sets time to 0
  clearInterval(interval);
  foo()
}

// I assume you want this to happen when the timer runs down or the button is clicked
function foo() {
  document.getElementById('tableStyle').style.display = "block";
  document.getElementById('wordsIncluded').style.display = "block";
  document.getElementById('show_header_one').style.display = "block";
  recognition.abort(); //speech recognition stops when countdown timer ends
  isListening = false;
}

start(8*60)

#tableStyle, #wordsIncluded, #show_header_one { display: none; }

<p id="tableStyle">Table Style</p>
<p id="wordsIncluded">Words Included</p>
<p id="show_header_one">Show Header One</p>

<div id="circle">
  <p id="countdown">8:00</p>
</div>
<button id="submit_button" type="submit">Click to Submit</button>

Answer 2

const startingMinutes = 1;
let time = startingMinutes * 60;

var abort_count_down = true;

function updateCountDown() {

if (abort_count_down) {

    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
        
        seconds = seconds < 1 ? '0' + seconds : seconds;
        document.getElementById("countdown").innerHTML = `${minutes}:${seconds}`;
        time--;
        time = time < 0 ? 0 : time; 
            if (minutes == 0 && seconds == 0) {
                document.getElementById('tableStyle').style.display = "block";
                document.getElementById('wordsIncluded').style.display = "block";
                document.getElementById('show_header_one').style.display = "block";
                recognition.abort(); //speech recognition stops when countdown timer ends
                isListening = false;
            }

};


//my attempt at clearing the countdowntimer!

        window.addEventListener('DOMContentLoaded', function() {
            document.getElementById("submit_button").addEventListener("click", function() {
                abort_count_down = false;
            })});