CODEWITHSUNDEEP
javascriptsetinterval
John Connor
John Connor

Reputation: 39

How setInterval() function works?

After we put this function into a variable in order to be able to use clearInterval(), why it works without calling this function?

Usually, when we put a function into a variable, in order to fire it we should call it. In this example, I thought it should have worked like in the code below, but it works without calling it.

let time = 0;

var timer = setInterval(() => {
  window.console.log(`Time passed: ${time}`);
  time = time + 1;

  if (time > 5) {
    clearInterval(timer);
  }
}, 1000);

timer();

Upvotes: 1

Views: 1001

Answers (4)

Michael M.
Michael M.

Reputation: 11080

I don't think any of the current answers fully explains the issues with your code. I see three issues with your code.

You said this in your question:

Usually, when we put a function into a variable, in order to fire it we should call it

This is true. When a variable has a function as its value, you must call the variable/function in order to run it. However, the variable timer in your code is not a function. You passed a function to the setInterval() function, which then returns an ID number that can be passed to clearInterval() later on. In your code, timer is set to this ID number returned by setInterval(). The function is never in your variable because it is wrapped by a setInterval() call.

To fix this, change timer to a function, and change its name to something like makeTimer() because it creates a new timer. Inside your function, you can set a new variable (let's call it id) to the ID number that setInterval(). You can then pass id to clearInterval().

Your code has another problem though. You initialize the time = 0, so that when your function is first called by setInterval(), it prints "Time passed: 0". However, setInterval() first runs your function after 1000 milliseconds pass for the first time, so really 1 second has already passed, not 0. To fix this, just initialize time = 1 instead.

A few more things in your code could also be improved. Generally, global variables like your time variable are bad because it only needs to be inside the makeTimer() scope. You can also shorten your code that increments time and checks if time > 5 into one line with the ++ operator. See the code below:

const makeTimer = () => {
  let time = 1;
  let id = setInterval(() => {
    console.log(`Time passed: ${time}`);
    if (++time > 5) clearInterval(id);
  }, 1000);
};

makeTimer();

Upvotes: 0

Sifat Haque
Sifat Haque

Reputation: 6057

You need to wrap your setInterval to a function.

let time = 0;

var timer = () => setInterval(() => {
  console.log(`Time passed: ${time}`);
  time = time + 1;
  if (time > 5) {
    clearInterval(timer);
  }
}, 1000);

timer();

Upvotes: 0

venky royal
venky royal

Reputation: 2250

The clearInterval() function in JavaScript clears the interval which has been set by the setInterval() function before that.

  • setInterval() function takes two arguments. The first one was the function that is to be executed and the second argument was a time (in ms).
  • setInterval() executes the passed function for the given time interval. The number id value returned by setInterval() function is stored in a variable and it’s passed into the clearInterval() function to clear the interval.

let time = 0;

let timer = function() {
  return setInterval(() => {
    window.console.log(`Time passed: ${time}`);
    time = time + 1;

    if (time > 5) {
      clearInterval(timer);
    }
  }, 1000);
}

timer();

Upvotes: 0

Nijraj Gelani
Nijraj Gelani

Reputation: 1466

It would have worked as you expected if you were actually putting a function in the timer variable but you are not. You are calling setInterval function and storing its return value into the timer variable.

In order for it to work as you expect it to, you need to put it inside another function like this:

let time = 0;

var timer = function() {
  return setInterval(() => {
    window.console.log(`Time passed: ${time}`);
    time = time + 1;

    if (time > 5) {
      clearInterval(timer);
    }
  }, 1000);
}

timer();

Now, calling timer() will invoke the timer as you expect.

Upvotes: 3

Related Questions