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

Question

我正在尝试创建一个函数，它将结束倒数计时器，或者自动将分钟和秒作为countdown timer === 0的一部分；但是，似乎使用 clearInterval(time) 似乎不起作用！谁能指出我如何才能实现我想要做的事情！

请注意，我制作 startingMinutes = 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

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

Answer 2

使用clearInterval you need to pass it the value returned by setInterval

我在下面有一个使用您的代码的示例，其中我将值从我称为“interval”的“setInterval”传递给函数“stop”，该函数调用“clearInterval”来停止计时器，并运行您的代码是运行.

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>

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

How to end my countdown timer when a button is clicked?

html

javascript

button

countdown

countdowntimer