When writing a debounce, what is the point of clearTimeout?

Question

   debounceFunction() {
        let timeout = setTimeout(() => {
            doSomething();
            flag = true;
            clearTimeout(timeout);
        }, 250);
    }

I wrote a debounce function that looks like the above, I called this function for several times when an event is triggered. My question is, does the clearTimeout at the end of the setTimeout makes any sense?

What would be the optimal way to do it?

Thanks in advance :)

`clearTimeout` cancels the adding of this task to event-loop queue, but you need to call it before `setTimeout` — gurvinder372, Mar 14 '18 at 07:19
How about removing the `clearTimeout` call and test it again? — Andreas, Mar 14 '18 at 07:22
If it is not to break the `setTimeout` in the execution, it is not necessary to call `clearTimeout` in the end. — Heng Lin, Mar 14 '18 at 07:38

score 0 · Answer 1 · answered Mar 14 '18 at 08:06

Does the clearTimeout at the end of the setTimeout make any sense?

No, there's no point to call clearTimeout from within the setTimeout callback - it's too late there already. You cannot clear anything, the timeout already occurred.

clearTimeout is used when you want to prevent the callback from getting called before that would happen.

What would be the optimal way to do it?

Just omit it.

If you are asking about the optimal way to write debounce, see Can someone explain the "debounce" function in Javascript.

score 0 · Answer 2 · answered Mar 14 '18 at 08:07

My question is, does the clearTimeout at the end of the setTimeout makes any sense?

No, clearTimeout is used to clear the previous created timeout, so clearTimeout should be done before setTimeout in order to cancel out previous invocation of setTimeout.

What would be the optimal way to do it?

Have a look David Walsh's post and SO question

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

score 0 · Answer 3 · answered Aug 07 '20 at 07:03

clearTimeout() prevents the execution of the function that has been set with setTimeout(); In debouncing, a user is made to perform limited actions in a time interval. So we set that action inside a function within setTimeout and whenever the user tries to perform the same action within the given interval, we call clearTimeout to prevent user from doing it. So clearTimeout should be called before SetTimeout.

When writing a debounce, what is the point of clearTimeout?

3 Answers3