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

Posted 2023-02-25

【中文标题】计数器不断重置为 setInterval 循环上的声明变量

【英文标题】：Counter keeps resetting to declared variable on setInterval loop

【发布时间】：2019-08-29 19:26:39

【问题描述】：

我正在尝试使用 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 在每个循环中上升一个的解决方案。

【参考方案1】：

您可以尝试以下方法。

虽然我没有一定的价值，因此我注释了该代码，您可以根据需要取消注释该代码：

<script type="text/javascript">
      var secs = 10;
      var restSecs = 10;
      var secCounter = 0;
      var minCounter = 0;
      this.intervalFour = setInterval(() => this.totalTime(this.secs, this.restSecs), 1000);


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

在此解决方案中，秒数每秒钟都会完美增加。

【讨论】：

完美。非常感谢！

【参考方案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);

【讨论】：

setInterval() 在代码顶部的另一个函数中调用。我没有把完整的代码放在这里，因为有很多而且大部分都不相关。我不相信“这个”。是问题，因为我在同一页面上以相同的方式设置了其他 setInterval，没有问题。我很确定问题出在函数内部以及我如何使用/放置变量的位置。

【参考方案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);