setInterval() multiple 执行的函数不显示结果 | Javascript

Question

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?

Answer 1

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.