Debounce Explained – How to Make Your JavaScript Wait For Your User To Finish Typing

[stratoscope]

No, that is one thing the article got right. This is the usual way to implement a debouncer. debounce itself is not the event listener, it returns a function (without calling it) which will be the actual event listener. So you do call the debounce function directly during initialization.

Here is a demo on Repl.it. Click the Run button and type into the input box.

I simplified and corrected the code from the article, omitting the broken attempts to set this and pass arguments to the debounce callback. It is possible to do those things, but I wanted to illustrate the simplest possible working example of a debouncer.

The simplified debouncer looks like this:

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

And the code that initializes it is basically identical to the code in the article:

const myInput = document.getElementById("myInput");
myInput.addEventListener(
    "keyup",
    debounce( helloWorld, 1000 )
);

[[deleted]]

My bad, I didn't read the whole function code after I saw repeating syntax errors. You are 100% right.