Build an Autocomplete Input with Debounce

[@stannikolov]

Wow, I have just spent 1.5 hours on this video - rewatching it and looking up stuff. I've learnt so much more than debounce - var context, test() , regex flags and clearTimeout. Thank you for the video!

[@Colstonewall]

Thank you, Steve! BTW, I'm surprised you're not using Visual Studio Code. It's on a whole different level of awesomeness.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks Chris. I have been playing with VS Code. It's just not part of my normal workflow yet.

[@rumbly438b7]

Thanks Steve. Whenever possible, could you please provide a short overview/pseudo code of what the program is suppose to do before going into greater detail. It may seem redundent but it does wonders for visual learners like myself.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks for the note Rumbly. I will keep that in mind.

[@alexei643]

Can you explain, please? Why there is a need of bind() at line 71, why not use txt argument (line 60) inside callback of setTimeout directly?

[@SteveGriffith-Prof3ssorSt3v3]

The problem that we are trying to solve is keeping the value of txt to use later. We are calling a setTimeout, which is an async method, inside a Promise which is also asynchronous. When we provide a the function to the setTimeout we also want to provide the value of txt. So, the bind method creates a copy of the function and uses txt as the context. This way we have both the function and the value, in the future, whenever it wants to run. I have a couple other videos that will help with these concepts: call, apply, bind - kzbin.info/www/bejne/q3PHeWOfd5aJeq8 closures - kzbin.info/www/bejne/gWrJm4COa6tonKc

[@MichaelSalo]

The bind is a neat trick but probably not necessary here. I believe the txt variable is actually available in scope. To make it more explicit, txt could be passed in as an argument to the callback.

[@LawZist]

Great video!

[@romeojoseph766]

love the concept, but I ma stuck understanding the purpose of returning a function within debounce function I know it's create a closure so that I can have acess to outter function variable but I'm not fully understand Would you mind helping me with that

[@SteveGriffith-Prof3ssorSt3v3]

sorry I don't have any other videos on debounce or throttling. I do have a video on memoization, which is a related concept - kzbin.info/www/bejne/lWLHo4yGbL-glbM

[@alekm4185]

Hi Steve, what would be the difference between debounce and setitmeout. Debounce doesn't let you fire the func while setitmeout fires but waits for a few ms?

[@SteveGriffith-Prof3ssorSt3v3]

debounce is a limiter that you wrap around another function. When you have a function that will be called many times in rapid succession and you want to slow it down so it can't be called more than once every so often. Eg: an input event on an element that is going to call a fetch call and do an API search. We use setTimeout to create the minimal gap between calls.

[@alekm4185]

@@SteveGriffith-Prof3ssorSt3v3 Thanks a lot. And I have to say your content and the way you present and teach is amazig. Keep up the good work

[@lovefashro]

Hi Steve, thank you for this great tutorial. So would this solve the issue with getting the calls in the right order? Lets say even with the debounce, call 1 might take longer than call 2.

[@SteveGriffith-Prof3ssorSt3v3]

That is exactly the problem we are trying to solve with debounce.

[@lovefashro]

@@SteveGriffith-Prof3ssorSt3v3 Yes but it doesn't cancel previous calls that might take longer

[@SteveGriffith-Prof3ssorSt3v3]

@@lovefashro debouncing is to stop the previous calls from happening. We reduce the frequency so that will never happen, or at least happen very rarely.

[@lovefashro]

It reduces frequency but i've noticed sometimes if requests takes longer than debouncing time then you don't get the recent data and also you still have a queue of requests.

[@SteveGriffith-Prof3ssorSt3v3]

@@lovefashro You always have to consider what requests you are making and how long they take individually. You can add an additional check in the debounce for waiting for a response too.

[@AmenRa]

So does the `input` have an onChange that fires. Because I have been dealing with a problem when typing in a textarea typing slows down because of the onChange being fired.

[@SteveGriffith-Prof3ssorSt3v3]

The event is an "input" event, not a "change" event. For the change event to fire there also has to be a "blur" event that takes place on the input element.