Trying to clear a timeout and its not working. console.logging it returns a number after its been initialized and after it's been destroyed.

    const timer = setTimeout(() => {});
    console.log('initialised', timer); // initialised 22
    clearTimeout(timer);
    console.log('destroyed', timer); // destroyed 22

Trying to clear a timeout and its not working. console.logging it returns a number after its been initialized and after it's been destroyed.

    const timer = setTimeout(() => {});
    console.log('initialised', timer); // initialised 22
    clearTimeout(timer);
    console.log('destroyed', timer); // destroyed 22

I'm expecting the second log to return null. I also didn't expect the timer to be a simple number. I would have expected it to be an object. Is clearTimeout doing what it should be doing here?

• javascript

• 2 You're doing it right. The variable won't change in value. If you need to detect when a timer is running, get/set a boolean when you create/destroy your timer. Kinda confusing, but that's JavaScript. – sheng Commented Oct 23, 2018 at 19:04
• Bonus reading: that weird value is the ID of the timer. Also see this SO answer. – sheng Commented Oct 23, 2018 at 19:06
• A function call like clearTimeout(timer) cannot change the timer variable. JS doesn't have pass-by-reference calls. – Bergi Commented Oct 23, 2018 at 19:08
• even if clearTimeout changed the value you have it const, which for primitives means they can't change values... – dandavis Commented Oct 23, 2018 at 19:24

5 Answers 5

The timer variable holds a unique number that represents a particular timer. Clearing the timer stops the asynchronous operation, but your variable is still just that, a variable, and it will hold the last value you gave it unless it goes out of scope or your assign something else to it.

The best proof that your code is working as it should is to give the timer callback function some behavior and see if that behavior is correct. With your code, we'll see that the timer callback function never actually runs (no message from the callback function is ever written to the console) because you are cancelling it before the function that created it pletes. We don't need extra console.log() statements beyond that one.

const timer = setTimeout(() => { console.log("The timer function has run!" ); });
clearTimeout(timer);

NOTE: In most cases, we don't need to know the actual value of the timer variable. We only need to store it to kill its corresponding timer operation later.

clearTimeout is doing exactly what is expected of it. When you create a timeout, it returns a unique number, in your case you saved it in "timer" variable. Now when you clear timeout it just stops the setTimeout execution, but does not remove variable "timer"

I'm expecting the second log to return null.

The timer is a simple variable holding a number (ID of the timer). Doing clearTimeout does not change its value, but clears a timeout, i.e. stops the timer.

I would have expected it to be an object

Why though? There is nothing to store in it. It is a simple number, starting from 1 for a very first timer, 2 for a second one, etc.

Let's understand the return value of these functions.

The returned timeoutID is a positive integer value which identifies the timer created by the call to setTimeout();

This value can be passed to clearTimeout() to cancel the timeout.

It is guaranteed that the setTimeout() will always return an ID (number) not an object.

The return value of clearTimeout() is undefined.

Also, I would like to add one more point, in Javascript the type number is always passed by value. So, you shouldn't be expecting it to change while you just pass it to a function. Like in your case,

clearTimeout(timer);

An invocation like this can never change the value(at source) of the variable(type number) passed.

setTimeout defines a timer and returns a number that is the unique id of that timer. clearTimeout gets a timer id and cancels it.

Since number values in JavaScript are immutable and you are basically sending the timer variable's value to the clearTimeout function, the language, or the browser, cannot change the value of the variable, hence the number will not change in the scope of your function, and the result is that you still see the same number in both logs.

It does, however, cancels the timeout, so that the call to the function you sent to setTimeout will not be called, as long as you called clearTimeout before it was called.

Here is more information about setTimeout and clearTimeout.