当我点击按钮时功能不起作用？

Question

当我单击按钮时，计时器应该显示倒计时器。但按钮不起作用。

let timerCounter = document.getElementById("timer-counter");
let timer;
let timerCount;

function startTimer() {
  timer = setInterval(function() {
    timerCount--;
    timerElement.textContent = "Time; " + timerCount;
    if (timerCount === 0) {
      clearInterval(timer);
    }
  });
}
startButton.addEventListener("click", startTimer);

Answer 1

这是我到目前为止发现的：

• 您正在减少 timerCount，需要指定它的初始值才能工作。
• 您使用的是 timerElement 而不是您声明的 timerCounter。
• 您必须将第二个参数传递给 setInterval ，即 <代码>延迟。

const timerCounter = document.getElementById('timer-counter');
const startButton = document.getElementById('start-button');

let timer;
let timerCount = 30;

startButton.addEventListener('click', startTimer);

function startTimer() {
  timer = setInterval(function () {
    timerCount--;
    timerCounter.textContent = 'Time; ' + timerCount;
    if (timerCount === 0) {
      clearInterval(timer);
    }
  }, 1000);
}

<div id="timer-counter"></div>
<button id="start-button">Start</button>

Answer 2

这是一种稍微不同的方法，可以避免全局变量的一些问题。侦听器调用的函数初始化计数，然后返回单击按钮时调用的新函数（闭包）。它还使用了 setTimeout ，我发现它更容易理解。

// Cache your elements
const counter = document.querySelector('#counter');
const startButton = document.querySelector('button');

// Initialise your count variable
function startTimer(count = 30) {

  // Return a function that is called from
  // the listener
  return function loop () {

    // Disabled the button once it's been clicked
    if(!startButton.disabled) startButton.disabled = true;      

    counter.textContent = `Time: ${count}`;
    if (count > 0) {
      setTimeout(loop, 500, --count);
    }
  }

  loop();

}

// Call startTimer to initialise the count, and return
// a new function that is used as the listener
startButton.addEventListener('click', startTimer(), false);

<div id="counter"></div>
<button>Start</button>

Answer 3

我相信这可以改进。

• 在这个例子中，我们不会低于 0。
• 我们不允许超时冲突（超时不会叠加，导致奇怪的计数速度）。
• 当为 0 时，我们可以重置为原始数字。

const c = document.getElementById('timer-counter')
const b = document.getElementById('start-button')

let timer = false
let timerCount = 30

b.addEventListener('click', start)

function decrement() {

    if(timerCount < 0) {
        timerCount = 30
        timer = false
        return
    }

    c.innerText = `Count: ${timerCount}`
    timerCount--

    timer = setTimeout(decrement, 200)
}

function start() {
    if(timer) return

    decrement()
}

<div id="timer-counter"></div>
<button id="start-button">Start</button>