3 Minutes with Kent

Real World Debounce

01.15.2021 - By Kent C. DoddsPlay

Download our free app to listen on your phone

Download on the App StoreGet it on Google Play

Hey there friends I've been making notes of different things that I do or

like see in the real world that is like a good analogy for programming

concepts and one that I thought about recently was the programming

programming concept of a deep bounce and scanners at the grocery store.

So, I don't know about you but I I haven't used an actual like person

skinning in my groceries for years. I use the self checkout now. I like

that a lot better and even though maybe it's not as fast. I don't know. I

just like doing it myself.And one thing that you notice when you scan

something in is that you can scan it and then it will wait like let's say

that you have you bought like two pieces of chapstick and so you're gonna

scan it in and you can scan the same piece and so if you you scan it and

then you have to wait for a second before you can scan it again because

they've implemented a debounce and so basically the use case for a defense

is like well this scanner can scan probably once every millisecond or

something is it's very fast, but because people,Can't move that fast or

rather they're like putting the barcode up to the scanner.

So quickly in it can get those values in so quickly we don't want to

actually scan it all the time. So what we're going to do and this is

actually a reverse debounce. Normally you do it in the other direction, but

what we do is as soon as we call that function or whatever to actually do

the scan, we're not going to call that function again until a given amount

of time after that first call.

And that's why it's a reverse debounce because a regular deep.Bounce is

going to say once it's going to be called actually wait for a second to see

if we want to to be called again thereafter. So another use case for this

sort of thing would be if I'm typing in an input to do some sort of search

or filter and that process is really expensive or something like that.

Then we're going to wait 200 milliseconds before actually executing the

async call to go get the data response or something like that. And so we're

going to wait until the user stops typing. And so yeah, anyway, that was

just kind of an interesting thought that I had of like a real world.

Physical experience of you know, scanning things in with a scanner. It's a

reverse debounce so we go ahead and scan it right away and then wait for a

certain amount of time with the input like a search input. We're going to

wait 200 milliseconds first or 300 milliseconds or whatever before we

actually execute the the function.

So interesting concept debounce. It's actually a fun thing to implement on

your own the simple case is pretty easy to do. So go ahead and give that a

shot today. See ya.

More episodes from 3 Minutes with Kent