Debounce in Javascript

when you start writing a lot of dough moments one of the most important function that you would need to learn is the balance function so what is it about function imagine if you're building a shopping cart where user have picked lots of item to purchase and as a last event the user is clicking on a purchase button at that point the purchase order goes to the server but what if user clicks on that button accidentally twice in a quick succession does that mean the order will go twice it depends on how you design the system but you can protect against that kind of behavior using a DES balance function the balance function is basically if you keep clicking on the same button many times it would it would execute that event at the last on a last click for example if you have an event on a mouse move and when my mouse moves from one point to another it will keep firing the mouse move event and on every mouse move you don't want to fire that event so what you want to do is when the mouse starts to move and as soon as the mouse and then you want to fire that event so it only happens on at one time on a mouse move and similarly if you're scrolling on something and there's an event you can use a new balance function to prevent lots of events being fired so let's understand how it really works [Music] so let's create a button with the ID call my ID and I'm gonna call it click me here I have a button and I can add an event to it using the my ID so I would say document dot get element by ID and that would be my ID and I can add some event to it so add event listener and this event would be let's say click event and I can simply have an event which says console.log clicked so let's run this and then I will click on it and I have a clicked event but what if I keep clicking it will every time it will fire a click event so I don't want this what if I just keep clicking I want at the last click I want the event to be fine and that's the right behavior because user can accidentally quick double times so how do I do that so let's create a demand function and the concept of demand function is what you do is you set a time out so on every click the click event won't fire right away you would put let's say 2 second set timeout which means after 2 second the click event would fire and in meantime let's say if a user click is click on the same button again that set timeout gets reset so instead of this a console.log I would call a D balance function so this would be D bounce now it's not a building function you have to still build it build this function and you won't have an element and this function would take two arguments the first argument is the function that that you want to execute and the second argument would be how much time do you want it so let's say in this case I want two seconds which means 200 minutes 2000 milliseconds and I would simply say console.log clicked ok now it won't work right now because I don't have this function so let's build this function again it takes two arguments a function and a timeout so I'm gonna build it here Const they bounce equal to it will take a function and let's say delay right delay is nothing but this two second so this debounce function will get executed as soon as i pass in and it would return the the handle that well that will get executed so it will return a function so this is a higher-order function and it will have it can have a bunch of arguments and what it will do and it would set timeout and that we can timeout until the delay the same delay that we are passing here and inside we would execute this function so I would say functions whatever function we pass which is this function it does looks a little bit complex but if you understand it thoroughly then you would understand how it works and I would pass the same arguments here all right now every time I call this I need to set I need to get an ID of this side time out so I can cancel it if user clicks on multiple times so let's call it time out I D equal to and instead of defining here I'm going to define it here so it would hold it as a closure so let's call it let time out ID and to be undefined initially and it would set it once it sets a time out and again if you click on it again what it needs to do is if you have a previously set some time out it needs to cancel it so all it would do is if there is a timeout ID then it needs to cancel it so I would say clear timeout and timeout ID okay that's all it needs to do so let's understand this function it would pass two things function and a delay the function that we try to execute which would be this function where we simply say console.log clicked okay so that's that function and it delays 2,000 milliseconds which means two seconds and it would return another function which if there is a previously set timeout ID then it would clear it first so that it won't execute after that that much second and it would set a new timeout ID by setting set timer so there was a typo here clear timeout okay now if I click one time that it says clicked okay now let's click consecutively so if I keep clicking it doesn't print even after two seconds it's already two seconds right but it doesn't print because if keep clearing now if I stop then after two seconds it would click so this prevent all the excessive events from firing that's it folks I hope you learned something new from this video if you did please like subscribe and provide a nice comment don't forget to write a comment you can follow me in my facebook and twitter and you can follow the Facebook groups if you have any questions regarding react or any other front-end related questions you can purchase my udemy courses I have two courses currently on react and also JavaScript and you can translate this video the information is in the description and thank you

Channel: techsith

Views: 45,429

Keywords:

Id: B1P3GFa7jVc

Length: 8min 32sec (512 seconds)

Published: Mon Mar 02 2020