Javascript 去抖 function 误解

Question

In a course, the instructor wrote that debounce function:

const debounce = (func, delay) => {
    let timeId;
    return (...args) => {
        if(timeId) clearTimeout(timeId);
        timeId = setTimeout(() => {
            func.apply(null, args)
        }, delay)
    }
}

to use it in event listener like that

input.addEventListener('input', debounce(onInput, 1000))

I think with every input we would reassign timeId to undefined which would make clearTimeout not working but it does work, How??

Answer 1

debounce() is only called once, when the event listener is added. It returns a closure that uses the same timeId variable every time it's called. So the variable isn't reset to undefined on every input.

You would be correct if it were written like:

input.addEventListener('input', function() { debounce(onInput, 1000); })

This would call debounce() on every input, which would create a new timeId variable.

Answer 2

Barmar's answer is correct but there is a simpler way of doing that using the bind function:

input.addEventListener('input', debounce.bind(window, onInput, 1000))

The window at the start is the thisArg , the value of this in the function.