javascript setInterval не работает вовремя

Question

Я написал метод таймера, который работает неправильно. Он должен отображать время, прошедшее во время формы, но оно подсчитывается на 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" ЭСТ.

Answer 1

Вот пример того, что я придумал. Он использует время, чтобы не зависеть от точности вашего 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(); 

Answer 2

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

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 вызывается только один раз.

Answer 3

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

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

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

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

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

further reading

Answer 4

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

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();