Question

我正在尝试显示一个使用setInterval每秒增加一次的计时器。

尽管如此，变量似乎在每个循环中都会自行重置；结果是HTML页面上的显示没有改变。

我已将变量移至函数外部，但这不起作用。不太确定从这里去哪里。

    this.intervalFour = setInterval(() => this.totalTime(this.secs, this.restSecs), 1000);


    totalTime(seconds, rests) {
        var fullTime = seconds * 8 + rests * 7;
        fullTime--;
        var secCounter: any = 0;
        var minCounter: any = 0;
        secCounter++;
        if (secCounter < 10) {
            secCounter = "0" + secCounter;
        }
        if (minCounter < 10) {
            minCounter = "0" + minCounter;
        }
        if (secCounter == 60) {
            secCounter = 0;
            minCounter++;
        }
        if (fullTime = 0) {
            clearInterval(this.intervalFour);
        }
        this.m.innerHTML = minCounter;
        this.s.innerHTML = secCounter;
        console.log(secCounter, minCounter, "test");
}

我知道这是一件很愚蠢的事情，但是我找不到让secCounter在每个循环中增加一的解决方案。

Answer 1

您可以尝试以下方法。

尽管我没有什么价值，所以我评论了该代码，但是您可以根据需要取消注释该代码：

s[s.index.str.len()>3]

Gives
dddd     4
eeeee    5

在此解决方案中，秒每秒完美地增加。

Answer 2

我不确定是否正确，因为这里没有完整的代码，但是我认为setInterval回调函数中的'this'关键字是一个问题。

setInterval回调中的

'this'被绑定到全局'this'，在这种情况下是Window对象。

因此，您需要像这样指定“ this”对象。

const self = this;
self.secs = initSecs;
self.restSecs = initRestSecs;

self.totalTime = function totalTime() { ... };
setInterval(() => self.totalTime(self.secs, self.restSecs), 1000);

Answer 3

如果您希望显示某种计时器，这可能会有所帮助。

const displayTime = (ticks) => {
  const seconds = parseInt(ticks % 60);
  let minute = parseInt(ticks / 60);
  const hour = parseInt(minute / 60);
  if (hour > 0) {
    minute = parseInt(minute % 60);
  }
  console.log([hour, minute, seconds].join(':'));
};

const tick = 0;

setInterval(()=> displayTime(tick++), 1000);

计数器会在setInterval循环上不断重置为已声明的变量

3 个答案: