时间戳

首页 > 解决方案 > 我对 setInterval() 有一些问题

javascript - 我对 setInterval() 有一些问题

问题描述

我希望我的秒表好像完成了 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;
}

标签： javascript

解决方案

这种方法对你有用吗？

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 seconds，并timerMinute使用整数除以 60 的结果，而就像在您的初始代码中一样直接timerText接收。seconds

该async关键字没有为您的代码添加任何价值，因为它没有使用承诺，所以我删除了它。

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

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>

推荐阅读