Я написал метод таймера, который не работает правильно. Предполагается, что он отображает время, прошедшее с формы, но он считает 2 или 3 вместо одного раза в секунду. Что может вызвать это поведение и как я могу это исправить?

Мой код:

function startTimer() {
  var minutes, seconds;
  
  setInterval(function () {
    if (!isPaused) {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);
      
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      
      $('#TimeLabel').text("Form Time: " + minutes + ":" + seconds);
      
      ++timer;
    }
  }, 1000);
}

Приведенный выше код отображает «Время формы: 00:01», затем «Время формы: 00:04», затем «Время формы: 00: 07» и т. Д.

6
BrianLegg 18 Дек 2015 в 19:20

4 ответа

Лучший ответ

Вот пример того, что я придумал. Он использует время, чтобы не зависеть от точности вашего setInterval . Надеюсь это поможет!

function startTimer(){
        var minutes,
            seconds;

        var startTime = new Date;

        setInterval(function(){

            var currentTime = new Date;
            seconds = currentTime.getSeconds() - startTime.getSeconds();

            if(seconds < 0){
                seconds += 60;
            }else if(seconds === 0){
                minutes = currentTime.getMinutes() - startTime.getMinutes();
            }

            console.log(minutes + ':' + seconds);

        }, 100);
}
startTimer();
3
Antonio Manente 18 Дек 2015 в 17:22

Я только что использовал код в консоли и обнаружил, что он работает нормально, код:

  var timer =1;
  var minutes, seconds;

  setInterval(function () {

  minutes = parseInt(timer / 60, 10);
  seconds = parseInt(timer % 60, 10);

  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  console.log("Form Time: " + minutes + ":" + seconds);

  ++timer;
  }, 1000);

Так что может быть что-то, что увеличивает значение таймера или гарантирует, что ваша функция startTimer вызывается только один раз.

-1
Sundar Singh 18 Дек 2015 в 16:47

Проблема может быть связана с не объявлением всех ваших переменных. Когда я запускаю эту версию в консоли, она работает правильно:

function startTimer() {
  var minutes, seconds, isPaused = false, timer = 1;
  
  setInterval(function () {
    if (!isPaused) {
      minutes = parseInt(timer / 60, 10);
      seconds = parseInt(timer % 60, 10);
      
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      
      console.log("Form Time: " + minutes + ":" + seconds);
      
      timer++;
    }
  }, 1000);
}

startTimer();
-1
Makaze 18 Дек 2015 в 16:45

Это зависит от асинхронной природы javascript и того факта, что он работает в одном потоке.

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

Вам просто нужно иметь в виду, что: setTimeout или setInterval, или другие подобные инструкции будут выполняться в первый доступный момент после того, как delay time будет передан в качестве параметра.

Таким образом, window.setTimeout(function() { console.log('Hello World'); }, 1000); не означает, что он будет выполнен ровно через 1000 мс (1 с).

В основном это означает ожидание в течение 100 мс, а когда цикл обработки событий свободен, вызовите обратный вызов, переданный в качестве параметра.

дальнейшее чтение

0
Hitmands 18 Дек 2015 в 16:43