How is setInterval invoked here?-CodePudding

I have the following Javascript code attached to an HTML document with some CSS styling.

It is simply a box on the screen that changes the style background property colour according to those seen in the array. The id of "colour-changer" is used to access the HTML document and changes it each time the array is iterated.

The function declaration changeColour(); is used to make this happen by using colours.length to count its way through the array and then puts the array value into the HTML, which changes its background colour every 3 seconds.

Once it comes to the end of the array the counter is reset to 0, and it continues around again.

The setInterval method invokes the callback method changeColour() every 3 seconds to make this happen.

In order to stop the cycle, an onclick is event is added which invokes a clearInterval() method to print out "Timer stopped" inside the box. In order to do this the setInterval() method had to be stored in variable myTimer.

See the code below. It all works fine but this is not my real problem.

let colourChanger = document.getElementById ("colour-changer");
let colours = ["red","blue","green","pink"];
let counter = 0;

function changeColour(){

  if (counter >= colours.length){
   counter = 0;
  }
  
  colourChanger.style.background = colours[counter];
  counter  ;

}

let myTimer = setInterval(changeColour, 3000);

colourChanger.onclick = function (){
  
  clearInterval(myTimer);
  colourChanger.innerHTML = "Timer stopped";

}

What I cannot understand is the line let myTimer = setInterval(changeColour, 3000);

From my understanding if you store a function inside of a variable, it will NOT execute unless called separately. It will just sit there stored in the variable myTimer.

There is no setInterval(); call made outside of the variable anywhere.

MY QUESTION:

How then is this method invoked since it is simply stored inside of the variable myTimer?

CodePudding user response：

No, your understanding is wrong.

It executes setInterval(changeColour, 3000); and stores this particular interval reference ID to myTimer to later be used in clearInterval(myTimer)

var myTimer = setInterval(() => console.log('ping'), 3000);

setTimeout(() => clearInterval(myTimer), 10000);

console.log('myTimer value: ', myTimer);

CodePudding user response：

In order to do this the setInterval() method had to be stored in variable myTimer.

No, the return value of setInterval is stored in myTimer by that code. setInterval is called (it has (/*...*/) after it, which calls it).

From my understanding if you store a function inside of a variable, it will NOT execute unless called separately.

That's correct, but that's not what that line of code is doing. This code:

let myTimer = setInterval(changeColour, 3000);

calls setInterval and stores its return value in myTimer, exactly the way:

let x = example();

calls example and stores its return value in x.

It's the changeColour function that is only referenced, not called, by that code (there's no (/*...*/) after it). Doing that passes changeColour into setInterval, so that setInterval knows what function to call every three seconds or so.

So in that code, setInterval is called, and changeColour is just referenced (it's called later by the timer mechanism).

CodePudding user response：

I was confused because I saw a video that showed this:

let f = function foo(){
console.log("Hello");
};

f();

This is stored in a variable and is called when invoked by f();

How is this example different from the setInterval example?

CodePudding user response：

setInterval() function will return IntervalID, It will set execution interval for given milliseconds.

In your case once this line is executed it will start executing changeColour function every 3000ms / 3 seconds and return IntervalID.

Now this IntervalID is used to stop executing your function every 3 seconds in the future.

to stop executing you can use clearInterval(IntervalID).

if any doubts please comment.