JavaScript Debouncing Explained Simply

[@DevSage]

Github Code (Follow me!): github.com/pkellz/devsage/tree/master/Debouncing 🌎 Find Me Here: Twitter: twitter.com/realDevSage Ebooks: payhip.com/devsage Discord: discord.gg/BP8wPv6raA Merch: cottonbureau.com/people/devsage

[@Snnupy1]

I'm a begginer programer here and omg this code is amazing. Just a bit hard to understand but you explaing it well and it works wonders

[@DevSage]

Glad it helps!

[@Space_Trucker]

This is really clever and well-explained. Great video!

[@DevSage]

Thanks a bunch!

[@muhammedafsal7079]

Best video on Debouncing 💥💥

[@DevSage]

Appreciate it!

[@HeyyxLindsay]

This was the most helpful video I've found on the concept. Thank you for taking time to explain each step!

[@DevSage]

No problem Lindsay 👍🏽

[@ogs3721]

Landed here for the first time. The best video ever. And now I'm one of your subscriber.

[@qznfrqznfrli2449]

Excellent explanation

[@ilkpjz5474]

Thank you for the easy explanation, best one I’ve found online 🙏

[@caiyuhui]

7:30 addEventListener()的第二个形参是函数引用地址，所有如果把函数的定义拿出来另外单独定义，则返回值须是一函数引用地址

[@anvarsaidov8964]

Nailed both debouncer and closure.

[@ofamigeradoudd]

Let's say I need to fire an function at two input events: "keyup" and "change". "Keyup" event needs to wait 3000ms. "Change" needs to wait just 500ms. If I call the debounce function in an event listener to each kind of event, the timeout id will be different and, after key up and leave the input (change), both event will be fired. So I need to share the timeout id. to do that, I put a new argument in the debounce function pointing to an external variable to be used as shared reference. It may work, but I ask, this is the best way to do it?

[@cas818028]

Love it! Keep up the great work

[@DevSage]

Thanks!

[@alexxx4434]

Very well explained. I guess the other way to solve the problem is to pass the first event though and have a cooldown when next events would be ignored.

[@DevSage]

Yeah I think you're talking about throttling. Yes that's another way to prevent too many event triggers

[@cjmaaz]

When the event listener gets fired multiple times when pressed multiple times, how does it remembers the last timeout Id? How does it stores the last timeout Id when it is in that scope? Is it because of closure? BTW great video, keep growing ❤️

[@DevSage]

Exactly. Yes it's because of the closure. It may not be obvious just by looking at the code but technically the outer function (debounce()) only gets called once, but each time you trigger a new click the inner function gets called. Go to this link to fact check me -> playcode.io/914444 Since debounce() only gets called once, there is only one reference to the timeout ID. debounce() will remember what value was last saved in it even though the handler gets called multiple times.

[@bowielam7866]

That’s exactly what I want to ask. Thank you so much!

[@cjmaaz]

@@DevSage Thank you so much for explaining it. Salute you for providing the playcode link.

[@pauladeniyi5876]

Well explained. Thanks.

[@eduardojavascript]

Your videos are awsome dude, thanks!

[@DevSage]

You're welcome!

[@shobhitkumar_shorts]

Please create video on throttling also

[@NareshKushwaha-rp7rh]

Superb i will be great if you make video on throttling as well.

[@DevenSitapara]

Bang on concept keep it up

[@shobhitkumar_shorts]

Awesome bro 🤜

[@salmaneait-ssi6782]

thank you so much !!

[@dominiquetalis1516]

Hello Devsage. I have a question. Even if the timeout is in the task queue, cleatTimeOut can delete it from the task queue. Is that right ?

[@DevSage]

clearTimeout cancels a previously set timeout. So, effectively, yes it removes it from the task queue.

[@dominiquetalis1516]

@@DevSage Okay, thanks a lot. Your channel is a recommended place for JS developer. Keep going on !!!

[@codify2450]

great video, alos what is the vs extension you are using to show how many time func/var is refrenced, can you post the link please?

[@codify2450]

got it from the vs code setting, thanks

[@Cinema69-entertainment]

Love your videos bro but i think you should change the intro sound, it is quite creepy for me

[@bigbrother1211]

Very well explained

[@yynnooot]

great explanation!

[@ExmuslimHafiz]

Thanks man🥰🥰

[@DevSage]

No problem 👍

[@phillipfranco8456]

I love you

[@thambimoirangthem4499]

awesome . thank you very much