1

I have a problem understanding the way in which setInterval and clearInterval work in JavaScript.

I have read different articles on these two functions but I am still confused.

Given the fact that JavaScript is single thread then when we call test=setInterval(function(){}, t) we will schedule our function to be executed every t miliseconds. Unless we clearInterval(test).

  • What does that mean? Does it mean that by clearInterval we cancle the setInterval which is already in the queue of JavaScript?
  • What would happen if we setInterval several times but clearInterval only once?
  • Can we clearInterval in setInterval?
  • How JavaScript handles the scheduled process?
Suo6613
  • 431
  • 5
  • 17

2 Answers2

2

What does that mean? Does it mean that by clearInterval we cancle the setInterval which is already in the queue of JavaScript?

Yes.

What would happen if we setInterval several times but clearInterval only once?

Each setInterval returns a handle that you can use with clearInterval to stop that specific timer. Each timer is handled individually.

Can we clearInterval in setInterval?

Yes.

How JavaScript handles the scheduled process?

Pretty much like any other event. An event is triggered at an interval, and the event handler calls the callback function that you specify. If some script is running when the event is triggered, then the event will be handled when the control is returned to the browser.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Thanks. For the second question - Do you mean that if I use `handler=setInterval(function(){}, t)` 5 times and then use `clearInterval(handler)`, then I would have 4 scheduled process inside the queue? – Suo6613 Apr 13 '15 at 18:42
  • 1
    @Suo6613 yes. Each call to `setInterval()` establishes a distinct, independent timer. – Pointy Apr 13 '15 at 18:43
  • 1
    @Suo6613 also you're not really scheduling "processes", you're scheduling *events*, and the function you pass to `setInterval()` is the event handler. (They're not "events" likc "click" or whatever, but it's more similar to that than to the concept of a "process".) – Pointy Apr 13 '15 at 18:44
  • @Suo6613: If you call `setInterval` five times you get five timers and one handle for each timer. If you store them in the same varible then each one will ovewrite the previous, and you have five timers and one handle. Using the handle with `clearInterval` will only stop the timer that you have a handle to, leaving you with the four timers running that you no longer have the handles to. – Guffa Apr 13 '15 at 18:46
  • When there is no handler for the remaining four, then they won't be executed or they cannot be stopped? – Suo6613 Apr 14 '15 at 01:14
  • 1
    @Suo6613: They can't be stopped. The handle (not handler) is not needed for it to run, it's only used for stopping it. – Guffa Apr 14 '15 at 09:19
  • thanks a lot. Just one more question! can we `clearInterval` when the function inside the `setInterval` is in middle of its working? Not within the fuction. Let's say using some callback functions which is independent from the function inside the `setInterval` – Suo6613 Apr 14 '15 at 15:29
  • 1
    @Suo6613: Yes, you can use `clearInterval` at any time, from anywhere in the code. – Guffa Apr 14 '15 at 16:34
1

Each setInterval call returns a unique value that when passed into clearInterval stops the specific call of setInterval that returned that value.

So in your example, test that was returned when calling setInterval will be different than a value returned from a another setInterval or setTimeout call. Therefore when doing clearInterval(test); only the call that returned test will stop running on interval.

Community
  • 1
  • 1
Moishe Lipsker
  • 2,974
  • 2
  • 21
  • 29