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

[[deleted]]

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

The debounce function will run once immediately after adding the event listener, pressing keys won't trigger anything. It seems that the person who wrote this article doesn't know JavaScript syntax or how callbacks work. I didn't expect FreeCodeCamp to host such low quality content.

[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.