即使外部函数被多次触发，返回的内部函数如何引用相同的外部函数变量？

Question

I am trying to understand how this debounce function works:

const myInput = document.getElementById("myInput");

myInput.addEventListener(
    "keyup",
    debounce( helloWorld, 2000 )
);

function debounce( callback, delay ) {
    let timeout;
    return function() {
        clearTimeout( timeout );
        timeout = setTimeout( callback, delay );
    }
}

From my understanding, every time someone performs a "keyup" action, a new debounce function is fired and added to the call stack. Now it is my belief that each one of these debounce functions has its own independent notion of "timeout" which the inner function acts on. However, the actual case it seems is that when "keyup" is performed many times, multiple inner functions are returned that all seem to share a reference to the same "timeout" variable, which allows this function to work.

My question is, where does my understanding fall apart? When "keyup" is fired multiple times, is it true that there are multiple debounce functions going to the call stack? Or is it just one function with one timeout variable, but with multiple returned functions?

Answer 1

The debounce is called once. Then each time you release the key inner function is called.

You can check this by adding a console.log inside the debounce

The second argument that is passed to addEventListener is the inne function of the debounce

Inner function is also created only once when you initialize the listener. This function is just called every time listener fires.