0

I am making a timer in javascript. But there is one thing I am not getting.

Here's the code...

var time = 0;
var timeInterval;
var testTime;


//Main code which increases the value of variable time by 1 every second until interval is stopped

timeInterval = setInterval(function (){
    time++;
    testTime = time;
}, 1000);



//Code to stop the interval after 10 seconds.
setTimeOut(function() {
    clearInterval(timeInterval);
},10000);



//Expected value -> 10
//I get -> 0

console.log(testTime)

If I am running a function which increases the value of time by 1 10times by setInterval() method... Why the value of time is not updating?

Philip Franklin
  • 31
  • 4
  • 2
    the console log will run before any of the timeouts. put it inside the timeout? Also you should be seeing `undefined` in the log, not `0` – evolutionxbox Jun 27 '22 at 16:01
  • You order a pizza and you eat it before it is delivered. `console.log(testTime)` does not sit there and wait for the intervals to run. Heck it has no clue that the variable it references updates. You need to work with the value in either the interval or in the timeout depending on your use case. – epascarello Jun 27 '22 at 16:06
  • https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron – epascarello Jun 27 '22 at 16:07
  • To elaborate on the above comments, the functions you set up with timers run at some point in the future, so the JavaScript runtime keeps moving through your code, therefore encountering the `console.log()` before the interval has elapsed. – Scott Marcus Jun 27 '22 at 16:09

1 Answers1

0

When you call setInterval, you are asking code to run after a certain amount of time. The setInterval function is an example of a function that takes a function as a parameter.

This means that you're declaring a function and asking setInterval to call it at a later time all in one go. None of what is inside the function will be called until the interval happens.

Your console.log is not inside either of the functions you gave to setInterval or setTimeout, so it will run straight away.

The order of execution is:

  1. Your variables are declared
  2. Your call to ask setInterval to run your function periodically
  3. Your call to ask setTimeout to run your function after 10 seconds
  4. Your console.log is made
  5. At this point, the execution on your main thread ends
  6. The function you gave to setInterval is called a bunch of times
  7. The function you gave to setTimeout is called once

If you want to fix your code, you can put the console.log in the setTimeout function to ask it to run at the end of the 10 seconds (putting it inside step 7).

var time = 0;

// Main code which increases the value of variable time by 1 every second until interval is stopped
var timeInterval = setInterval(function (){
    time++;
    console.log("time during interval: ", time);
}, 1000);

// Code to stop the interval after 10 seconds.
setTimeout(function() {
    clearInterval(timeInterval);
    console.log("time at end: ", time);
}, 10000);

Depending on your objective, you might rather simplify your code by calling clearInterval inside your interval function (if(time > 10) clearInterval(...)) to reduce the likelihood of a bug.

Lawrence Job
  • 56
  • 5