56

When working on some Javascript for a web application, I noticed that I had used setTimeout, but I had tried to clear it with clearInterval and it stopped the timeout from occurring in Google Chrome and Internet Explorer 9.

Are clearTimeout and clearInterval interchangeable?

Here's a JSfiddle with an example of what I'm talking about.

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
Ivan
  • 10,052
  • 12
  • 47
  • 78
  • 6
    While this is probably true in most implementations, you shouldn't rely on it as it's not defined this way. – James Montagne Mar 28 '12 at 18:43
  • It may work in some browsers, but it might not work the same in all browsers, so I wouldn't actually do it. – gen_Eric Mar 28 '12 at 18:43
  • Great question (and answers) thanks for asking! – Myster Jun 27 '12 at 08:31
  • I noticed this too and just tested it in Node.js, because Node seems to have a very different implementation of interval and timeout (they return objects instead of numerical IDs). But the behavior is present there, too: you can call clearTimeout with the object returned from setInterval and it does in fact end the cycle. – Semicolon Feb 07 '14 at 05:36

4 Answers4

34

Actually I believe that we can make a fairly strong conclusion from the W3C spec (http://www.w3.org/TR/html5/webappapis.html#timers). It is not explicitly guaranteed but we have a lot of evidence that almost any reasonable implementation would have this behavior:

1) Timeouts and Intervals actually use the same underlying function:

The setTimeout() method must return the value returned by the timer initialization steps, passing them the method's arguments... and the repeat flag set to false.

The setInterval() method must return the value returned by the timer initialization steps, passing them the method's arguments.... and the repeat flag set to true.

2) This single function - the "timer initialization steps" mentioned above - uses a single list of timers:

2, ...let handle be a user-agent-defined integer that is greater than zero that will identify the timeout to be set by this call in the list of active timers.

10, Return handle...

3) clearTimeout() and clearInterval() both operate on that list (and in fact are not differentiated by the spec in any way)

The clearTimeout() and clearInterval() methods must clear the entry identified as handle from the list of active timers of the WindowTimers object on which the method was invoked, where handle is the argument passed to the method, if any. (If handle does not identify an entry in the list of active timers of the WindowTimers object on which the method was invoked, the method does nothing.)

I believe this presents a fairly strong case that clearTimeout and clearInterval should by synonymous according to the spec. This is backed up by the fact that this works in all the browsers I tested (Chrome 37, Firefox 33, and Opera 25).

lemiant
  • 4,205
  • 4
  • 31
  • 38
  • I just noticed I'd been using the wrong one of these for years! Didn't seem to cause any problems for my users. So I'd say all modern browsers treat these as the same. – rgbflawed Sep 04 '20 at 02:55
30

No, they are not interchangeable.

Sure, some browsers may very well share the same code to clear intervals and timeouts the same way, but does not mean they are interchangeable and you are most certainly not guaranteed that they would work the same across all browser implementations. It comes down to these two methods being defined differently for different purposes and therefore you should use them for their designated uses.. Otherwise, you're just asking for trouble.

rgthree
  • 7,217
  • 17
  • 21
  • Actually, the implementation in all major browsers already asks for trouble. If I define a timeout and clear interval with some ID apparently being the same ID, I expect my timeout to persist. And it doesn't. – Robo Robok Aug 15 '19 at 11:01
  • 2
    @RoboRobok Timeout and interval share the same pool of IDs. That means that [you'll never have an ID reused as you describe](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Syntax). If an ID is returned by setTimeout, the same ID will never be returned by setTimeout (or setInterval again) on the same window/worker object. – drmercer Jan 15 '20 at 16:58
26

From the Mozilla reference:

It's worth noting that the pool of IDs used by setTimeout() and setInterval() are shared, which means you can technically use clearTimeout() and clearInterval() interchangeably. However, for clarity, you should avoid doing so.

Albert Vila Calvo
  • 15,298
  • 6
  • 62
  • 73
Tom Auger
  • 19,421
  • 22
  • 81
  • 104
0

Even if they can be used synonymously now it could change at any time in the future. Why shouldn't you call a spade a spade? :-)

YMMD
  • 3,730
  • 2
  • 32
  • 43
  • 1
    Yes, that's a good standard practice not to use unpublished functionality, but that doesn't answer the question now does it. – Daisetsu Mar 28 '12 at 18:44
  • 1
    I have an interval which sometimes needs to start in the middle, so I use a timeout and then an interval. Sometimes the interval needs to be stopped, but I'd rather not have two arrays (one for timeouts and one for intervals) when I could just have one. – Seph Reed Mar 31 '19 at 18:57