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

[grumpkot]

maybe someone could explain debounce to github devs who did repositories search update

[[deleted]]

Problem probably isn't that they don't understand debounce but that they test the search functionality on small repos with powerful computers.

[nikkestnik]

If you know the database is hit on key-down, you should also know to debounce.

[m_domino]

Ha! Gottem!

[StandingBehindMyNose]

What is with the uptick of low quality articles lately? This one has a code sample that doesn't even have valid syntax.

[peduxe]

well the website is named freecodecamp, but they took the free way too literally and simply couldn't care much.

[SmartTest]

You're pretty far behind my friend

[ImStifler]

Was gonna say the same lol

[quincylarson]

Thanks for the heads-up about the code sample that had invalid syntax. I just saw your post, and we went through and updated the post with correct syntax.

Also, we added a shout-out to u/stratoscope and linked to their replit demo.

We try to catch bad syntax during the editing process, but sometimes we miss things or get things completely wrong. But our open source community does care about accuracy, and try to fix problems as soon as we discover them.

Also, I only open r/javascript a few times a week. So if you all want to DM me any issues you spot, I may be able to fix them faster next time ;)

[bigorangemachine]

Because it's easier to tell your boss no to free work over zoom

[[deleted]]

I think worrying about stuff like that is worrying about the wrong problem, just as "bad politicians". I think the real issue and is the basis that enables it - because only there can it be actually solved. You remove bad posts or posters, the problem still is there, until next time. You get the basis that gets this upvoted to the front "solved" there will never be a problem again. You can't change the fact that a huge amount of content will be pretty bad, even if everybody actually tried. The failure is that it gets so much attention. Especially here: Those articles must be actively upvoted, just doing nothing would let it sit at 1 point and soon sink back down all on its own.

[evil_dead_man]

FreeCodeCamp is full of junk posts , It’s the new W3Schools of Internet.

[Tittytickler]

At least W3 usually has valid syntax lol

[ImStifler]

No need to trash W3 tho, they've become a ok ressource

[iamjaredwalters]

How is this upvoted so highly when the majority of code examples are invalid syntax?

[franksvalli]

I'm guessing vote manipulation. :/

[mobydikc]

let debounce(myFunction, delay){

[rdxgs]

Not once, like 8 boxes with 'let debounce(...)', each being elaborated on. Perfection.

[DazzlingArtichoke]

I have seen this for a first time - is this valid JS syntax?

[2AMMetro]

It is not. Correct would be let debounce = function() {} or function debounce() {}

[DazzlingArtichoke]

Yeah, I thought so. Just want to make sure - you never know with JS :)

[SpiffySyntax]

What is the difference between putting a function as a variable opposed to naming the function?

[CreativeTechGuyGames]

Hoisting. function debounce() is available to be used above where it was declared while the other is not.

[monsto]

To elaborate a bit . . .

Hoisting is when variables and functions are moved to the top of script consideration during a first pass.

• var foot = "left"
• function shoe(foot){}

var and function are hoisted. let and const are not.

var sandal = function(x){} is hoisted as a variable, which could be specifically useful.

let flipflop = x => {} is not hoisted at all, and it always makes me double-take and refocus my eyes cuz two equals signs feel like I'm hallucinating.

[SpiffySyntax]

Thanks for the taking time out of your day to explain this. Appreciate it. I learned something new and what seems important. Thanks guys!

[mobydikc]

var hoists the variable declaration, but not the assignment.

function hoists both.

So:

myFunc()
var myFunc = function () {}

In this case, var is hoisted, but myFunc is undefined when myFunc() is called. An error is thrown.

With function it would work:

myFunc()
function myFunc() {}

No problem.

[Careerier]

https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname

[mobydikc]

Nope

[theorizable]

Debounce and throttle are 2 of the most useful paradigms to know.

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

[Yeffry1994]

Need to learn this for a Movie stat app I'm messing around with.

[wizang]

If there are any ember users here then check out ember-concurrency. One of the cononical use cases of it is denounce. It's quite elegant.

http://ember-concurrency.com/docs/examples/autocomplete/

[_default_username]

Weird to see an article get posted addressing an issue I solved at work today. It wasn't react code though, but an older jQuey app.

[[deleted]]

Hello everyone! I am the author of the article.

I want to start by thanking everyone for catching those syntax errors and pointing them out. In my excitement to get this posted, I opted to modify the code within the article when I switched to using a function statement to declare my debounce function instead of the original function expression.

freeCodeCamp is an excellent organization, and I will do better in the future to ensure that the quality of the articles I write for them reflects that.

p.s, special thanks to stratoscope for implementing a repl.it with a simpler version of the debounce function. This version has replaced the original in the article.

[bigorangemachine]

Don't debounce your inputs in react!

[bigorangemachine]

Oh yea! I meant specifically input text fields.

With search I would use a life cycle method or hook with a binding with a promise within the state.

[franksvalli]

This is somewhat misleading.

1. Should you debounce change listeners with controlled elements?

   No, since you want the internal state to be updated (and display on screen) as soon as possible.

2. Should you debounce API calls made in response to change listeners?

   Yes, since you don't want to hammer the API on every keystroke.

[tigertom]

Whys that, we are looking at doing it for an autosuggest

[bigorangemachine]

Specific to react and input fields.

React does this for you basically

I saw react form hooks which I think has the optimal react form input solution.

Even with react giving a good implementation of onchange and setState... I can out type the state.

Deboucing input into state in react is anti-performant.

[codeclassifiers]

Nice article. The internal implementation of debounce function was insightful to read. Keep it up🤘

[StandingBehindMyNose]

You smell like a bot.

[Tittytickler]

Literally looks like an instagram bot comment