[Solved] javascript setInterval not running on time

I’ve written a timer method which isn’t working correctly. It is supposed to display the time elapsed while on a form, but it is counting by 2’s or 3’s instead of once per second. What could cause this behavior and how can I fix it?

My code:

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

The above code displays “Form Time: 00:01” then “Form Time: 00:04” then “Form Time:00:07” ect.

Solution #1:

Here’s an example of what I came up with. It uses time so as not to be dependent on the accuracy of your setInterval. Hope this helps!

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();
Respondent: Antonio Manente

Solution #2:

It depends on the async nature of javascript and on the fact that it runs on a single thread.

There are many articles on the web who explain how the event loop works, so, I think that isn’t necessary to explain it here.

You just need to keep in mind that:
setTimeout or setInterval, or other similar instructions, will be executed at the first available time after the delay time passed as parameter.

So, window.setTimeout(function() { console.log('Hello World'); }, 1000); doesn’t mean that will be executed exactly after 1000ms (1s).

It basically means wait for 100ms and when the event loop is free call the callback passed as parameter.

further reading

Respondent: Hitmands

Solution #3:

The problem may have something to do with not declaring all of your variables. When I run this version in the console, it works properly:

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

Respondent: Makaze

Solution #4:

I have just used code in console and found it is working fine there, code is :

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

So there might be something which increases the value of timer or ensure that your function startTimer called only once.

Respondent: Sundar Singh

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.