CODEWITHSUNDEEP
javascriptjquery
BrianLegg
BrianLegg

Reputation: 1700

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.

Upvotes: 6

Views: 3561

Answers (4)

Antonio Manente
Antonio Manente

Reputation: 360

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

Upvotes: 4

Sundar Singh
Sundar Singh

Reputation: 686

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.

Upvotes: 0

Makaze
Makaze

Reputation: 1086

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

Upvotes: 0

Hitmands
Hitmands

Reputation: 14179

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

Upvotes: 0

Related Questions