javascript - 我在 setInterval() 方面遇到一些问题

Question

我希望我的秒表好像 60 秒已完成。应该有分钟和秒的增量再次从 0 开始。我尝试了很多方法来做到这一点，但当时间为一分钟时它总是停止工作..它是否是 setInterval()

中内置的问题

async timer() {


  var timeout = setInterval(() => {
    count++
    this.timerSecond.innerText = count;
    if (count > 59) {
      count = 0;
      this.timerSecond.innerText = count;
      count1++
      this.timerMinute.innerText = count1

    }
  }, 100);
  console.log(timeout);

  return timeout;
}

Answer 1

这个方法对你有用吗？

timer () {
  let seconds = 0;

  const tick = () => {
    this.timerText.textContent = seconds;
    this.timerSecond.textContent = `${seconds % 60}`.padStart(2, '0');
    this.timerMinute.textContent = Math.floor(seconds / 60);
    seconds++;
  };

  tick();
  return setInterval(tick, 1000);
}

很难说为什么有两个单独的 setInterval() 调用，但我删除了每 100 毫秒调用一次的调用，并将逻辑合并为一个调用。

timerSecond 使用秒 的 60 模，timerMinute 使用整数除以 60 的结果，而 timerText code> 只是直接接收秒，就像在您的初始代码中一样。

async 关键字没有为您的代码添加任何值，因为它都没有使用 Promise，所以我将其删除。

这是一个稍微详细的示例来演示功能:

class Stopwatch {
  timerText = document.querySelector('.text');
  timerSecond = document.querySelector('.second');
  timerMinute = document.querySelector('.minute');

  timer () {
    let seconds = 0;

    const tick = () => {
      this.timerText.textContent = seconds;
      this.timerSecond.textContent = `${seconds % 60}`.padStart(2, '0');
      this.timerMinute.textContent = Math.floor(seconds / 60);
      seconds++;
    };

    tick();
    return setInterval(tick, 1000);
  }
}

new Stopwatch().timer();

<div class="text"></div>
<div>
  <span class="minute"></span>:<span class="second"></span>
</div>