Javascript - Dynamically changing interval value of setTimeout/setInterval

Question

Can anyone please explain this code?

var checkinterval = 1;
var myFunction = function(){
    clearInterval(Interval2);
    console.log(checkinterval++);
    setInterval(myFunction, 5000);  
}
var Interval2 = setInterval(myFunction, 1000);

This code is calling a function within its own definition. i.e. inside myFunction, there is setInterval(myFunction, 5000) which is calling the function inside its own definition. That does not make sense.

Similarly in clearInterval(Interval2), the variable Interval2 is being called before its own definition.

I am sorry but I am just a newbie with these timers. Can someone please elaborate these bits of lines of code?

That line of code that reads "Interval2" won't execute until "myFunction" executes, which is after "Interval2" is defined. — Keen
– Keen, Commented Jun 20, 2016 at 23:54
"setInterval(myFunction, 5000);" should probably be "Interval2 = setInterval(myFunction, 5000);". As it is now, the first interval ID stays in "Interval2" and gets cleared over and over again. The new intervals will just keep adding up. — Keen
– Keen, Commented Jun 20, 2016 at 23:56

Teo Nicholas · Accepted Answer · 2016-06-21 00:04:34Z

1

From my understanding:

When you stored the function to the 'myFunction' variable, it is not executed immediately. They are simply stored for later use when you actually do invoke them.

This happens in the following line:

var Interval2 = setInterval(myFunction, 1000);

What this does is it invokes myFunction every 1 second. In your case, however, it executes myFunction once only, because in myFunction the

clearInterval(Interval2)

line would have then cleared the timer assigned to the Interval2 variable.

But the code does not just stop there. In myFunction, this line:

setInterval(myFunction, 5000);

would call myFunction every 5 seconds, which increments your checkInterval by 1 and outputs it to the console. This is what causes your browser to crash, because if you think about it:

First call of myFunction: 1 instance of myFunction would be queued to run in the next 5s (lets call this A)

5s later...

A is executed, which increments checkInterval by 1, and queues ANOTHER instance of myFunction to run in 5s (call this B)

5s later...

A is executed, which increments checkInterval by 1, and queues ANOTHER instance of myFunction to run in 5s (call this C)

A is executed, which increments checkInterval by 1, and queues ANOTHER instance of myFunction to run in 5s (call this D)

5s later...

A is executed... B is executed... C is executed... D is executed...

You get the drift.

Essentially what this code does is double the number of 'myFunction's to be executed every 5s. Eventually there would be so many of them to run, your browser would naturally be unable to handle the load.

Hope my explanation did not confuse you. I'll try to clarify any doubts you might have.

answered Jun 21, 2016 at 0:04

Teo Nicholas

736 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Awais Umar Over a year ago

This is the best explanation I could imagine. I also just studied the "recursion" for the javascript functions. That and with your wonderful explanation, I am able to finally understand this code. Thank you very much. God bless you.

score 1 · Accepted Answer · 2016-06-21 00:07:34Z

1

var checkinterval = 1; // global variable
var myFunction = function(){ // function in a variable
    clearInterval(Interval2); // stops Interval2 which loops every second
    console.log(checkinterval++); // gives the times how often it loops
    setInterval(myFunction, 5000); // myFuntion now loops every 5 seconds and stacks over and over couse the code will multiple
}
var Interval2 = setInterval(myFunction, 1000); // makes the snowball rolling after 1 sec.(calls the myFunction variable which has a function)

To make it run just go with IF(first loop?)

var checkinterval = 1; // global variable
var Interval2;
var myFunction = function(){ // function in a a variable
    if(checkinterval == 1){
        setInterval(myFunction, 5000); // myFuntion now loops every 5 seconds
    }

    console.log(checkinterval++); // gives the times how often it loops
}
Interval2 = setTimeout(myFunction, 1000); // makes the snowball rolling after 1 sec.(calls the myFunction variable which has a function)

edited Jun 21, 2016 at 0:07

answered Jun 20, 2016 at 23:48

user2628521

8 Comments

Awais Umar Over a year ago

Thank you for your time. But running this piece of code eventually kills my browser. Means something is speeding up. Why is that? Can you please elaborate which code will run first and what values will be at which step? I would be very grateful.

user2628521 Over a year ago

I will try this one out... Wait a few seconds.

Awais Umar Over a year ago

Sure. I will be here.

Keen Over a year ago

This will keep adding intervals because you only clear the first interval ID over and over again. All the new intervals just keep adding up. You need to reassign "Interval2".

Awais Umar Over a year ago

Thank you for this explanation. Things are a bit clear now. Just one thing, how can this code call a function within its own definition? I mean inside var myFunction, myFunction is being called.

|

Collectives™ on Stack Overflow

Javascript - Dynamically changing interval value of setTimeout/setInterval

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related