Счетчик продолжает сбрасываться на объявленную переменную в цикле setInterval

Я пытаюсь показать таймер, который увеличивается каждую секунду, используя 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");
}

Я знаю, что застревать на этом глупо, но я не могу найти решение, чтобы счетчик секунд увеличивался на единицу в каждом цикле.


typescript javascript timer setinterval seconds
person James Ross Codes    schedule 29.08.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете попробовать следующий подход.

Хотя у меня нет определенного значения, поэтому я прокомментировал этот код, вы можете раскомментировать этот код в соответствии с вашими потребностями:

<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");
}

В этом решении секунды идеально увеличиваются с каждой секундой.

person Pushprajsinh Chudasama    schedule 29.08.2019
comment
Идеальный. Большое спасибо! - person James Ross Codes; 29.08.2019

arrow_upward
0
arrow_downward

Я не уверен, что это правильно, потому что здесь нет полного кода, но я думаю, что ключевое слово this в функции обратного вызова setInterval является проблемой.

'this' в обратном вызове setInterval привязан к глобальному 'this', в данном случае объекту Window.

поэтому вам нужно указать «этот» объект следующим образом.

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

self.totalTime = function totalTime() { ... };
setInterval(() => self.totalTime(self.secs, self.restSecs), 1000);
person DrizzlingCattus    schedule 29.08.2019
comment
setInterval() вызывается в другой функции в верхней части кода. Я не привожу здесь полный код, так как его много и большая его часть не актуальна. Я не верю «этому». это проблема, поскольку у меня есть другой setInterval, настроенный таким же образом на той же странице, без проблем. Я почти уверен, что проблема в функции и в том, как я использую/где размещаю переменные. - person James Ross Codes; 29.08.2019

arrow_upward
0
arrow_downward

Если вы хотите показать какой-то таймер, это может помочь.

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);
person Arif Ansari    schedule 29.08.2019