How does Javascript handle assigning setInterval() to a variable?

Question

I have what seems like a basic javascript question that I can't wrap my head around. Why does the below code snippet work (taken from w3 schools)?

Essentially what I'm asking is why does the "myVar" variable below execute the setInterval method without an explicit call? My best guess is that is has to do with the way javascript handles variable assignment?

<html>
<body>

<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>

<button onclick="myFunction()">Try it</button>

<script>
var myVar;

function myFunction() {
    myVar = setInterval(alertFunc, 3000);
}

function alertFunc() {
  alert("Hello!");
}
</script>

</body>
</html>

In case any further clarification is needed, here is a code snippet from my current work:

var refresh = setInterval(function() {
      $("#div").load('Query.html');
   }, 1000);

So my question is, why does the above work without calling the "refresh" variable elsewhere?

You want to call variable? How? Are variables hiding something from us?! Do variables have own methods? — Oen44
– Oen44, Commented Apr 19, 2017 at 16:21

Christoph · Accepted Answer · 2017-04-19 17:00:20Z

6

setInterval() does the cyclic calls in itself(see edit) and returns the ID of the process handling the cyclic invokations. The purpose of assigning the return value is to use clearInterval() afterwards since it requires you to pass the return value of a setInterval() (= the process ID) as its parameter.

In your case, if you want the function you passed in setInterval() to not be called again (by the "cycling call chain" you created using setInterval) you can simply do clearInterval(refresh).

EDIT

setInterval needs two parameters : an inline function (or a function pointer) and an integer.

What setInterval does is wait {integer passed} milliseconds and then calls the function and redo the same thing over and over until you call clearInterval passing setInterval's return value.

edited Apr 19, 2017 at 17:00

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Apr 19, 2017 at 16:21

Vivick

5,0212 gold badges15 silver badges28 bronze badges

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

1 Comment

pmcy85 Over a year ago

Thanks for the response! I was just a bit confused if this was a trait of setinterval() itself or something to do with javascript assignment. Makes more sense now. Thanks again!

Alcides Queiroz · Accepted Answer · 2017-04-19 16:46:58Z

3

setInterval will schedule the recurring execution of a function expression/reference passed as its first argument and return an unique identifier for this scheduling. The passed function will be invoked each X milliseconds (this interval is the second argument passed to setInterval). You don't need to assign its return value to a variable in order to use setInterval. The main reason to store this identifier is to cancel this scheduling afterwards, by calling clearInterval(yourIntervalIdHere).

answered Apr 19, 2017 at 16:46

Alcides Queiroz

9,5563 gold badges30 silver badges44 bronze badges

Comments

Joshua J Wilborn · Accepted Answer · 2017-04-19 16:21:26Z

1

setInterval will immediately kick off the timers to run the function. The function simply returns an ID to track the timer to cancel it later. See the documentation below.

https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/timers#setInterval(callback_ms)

answered Apr 19, 2017 at 16:21

Joshua J Wilborn

5463 silver badges13 bronze badges

Comments

Bhabani Das · Accepted Answer · 2017-04-19 16:36:44Z

1

myVar = setInterval(alertFunc, 3000);

this is not storing the function variable to myVar, this store the output of the "setInerval" function to the myvar.

for simpler example , in the below code you are assigning the return of testfunc() to test.

var test;
function foo(){
  test = testfunc();
}
function testfunc(){
  console.log("hi");
}
foo();

if you want to assign testfunc function to test you have to write like

var test;
function foo(){
  test = testfunc;
}
function testfunc(){
  console.log("hi");
}
foo();

then you need to call explicitly

answered Apr 19, 2017 at 16:36

Bhabani Das

3905 silver badges14 bronze badges

2 Comments

pmcy85 Over a year ago

Okay this makes sense. Just to clarify, in the first code snippet you have above, testfunc() would immediately run when foo() is called and store that output into "test" whereas in the second code snippet the "testfunc" function would not be called until you explicitly call test()?

Bhabani Das Over a year ago

exactly . In java script function are object so you can call a function and get the output and store (1st snippet) or you can directly store the function in the variable (2nd snippet)

Christoph · Accepted Answer · 2017-04-19 16:57:01Z

-1

It doesn't "execute the setInterval method without an explicit call". The explicit call is right here: myVar = setInterval(alertFunc, 3000); inside the function myFunction.

myvar contains the return of calling setInterval.

edited Apr 19, 2017 at 16:57

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Apr 19, 2017 at 16:22

gforce301

2,9841 gold badge22 silver badges24 bronze badges

7 Comments

gforce301 Over a year ago

wow a down vote for a correct answer. how cute. Notice the "Essentially what I'm asking is why does the "myVar" variable below execute the setInterval method without an explicit call?"

Christoph Over a year ago

are you kids fighting again by downvoting each other's answers?

Christoph Over a year ago

Also, technically your answer is not correct. It does not execute the function right away (at least that's what you answer implies), since it is only handing over a function reference which is executed later.

gforce301 Over a year ago

Excuse me? this setInterval() is a function call. Notice the parenthesis? This is how we can tell it's a function call. From the very first line on this page: developer.mozilla.org/en-US/docs/Web/API/… "The setInterval() method".

Christoph Over a year ago

Yes, but the function you hand over as parameter does not get executed right away! It is simply added to the event loop and executed later (which is also, why the OP was confused).

|

Collectives™ on Stack Overflow

How does Javascript handle assigning setInterval() to a variable?

5 Answers 5

1 Comment

Comments

Comments

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related