🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
I think you have given example of debouncing as window resizing is usecase of debouncing. -Regardless of resizing it will only show output at a certain time means we are delying the function call. -(showing output/exicuting function) only when event pause is usecase of debouncing.
You really don’t need to throttle like that. You don’t need to compare and keep a track of the current time when it runs. It’s look buggy. How about this? const throttle = function(func, delay){ let isRunning = false; return function(…args){ if(!isRunning){ isRunning = true; func.apply(this, args); } setTimeout( ()=> isRunning = false, delay); } }
@@rakib_bhai74 with debounce understanding is that it will only execute the function once the activity is finished i.e. resize within the given delay time. So isn't debouncebetter here. Because with the throttle approach it will be called after time delay constantly right? Here, the reason to choose for debounce because the api call has fetching data and formatting data and then updating UI so due to complex operation i believe debounce would be better.
This code is incorrect. Just add a console.log statement in the handler, and you will see. Not only is it executing the code at every interval even when the window size is not changing, but it also requires the handler to have a new reference to work properly. Please avoid adding misleading videos.
Dude 😐, just put a console.log("expensive api call") inside handleResize function, and look out the logs in console, you will get to know the problem with the code. Its an infinite expensive api calls irrespective of the resizing event. But yeah, great efforts, I think somehow we have to remove the use of useState from our custom hook to resolve the code here.
Can any one please explain the code at 15:45? I just passed simple delay as an args instead of delay - (Date.now() - lastExecuted.current). It works fine. Couldn't find any error. What's the point of writing that line? Many thanks in advance.
