Debounce - Leetcode 2627 - JavaScript 30-Day Challenge

Solving Day 15 of the Leetcode 30-day javascript challenge. Today implement a debounced function and learn about some of the applications of debouncing.

0:00 - Read the problem
0:35 - Read example
2:40 - Use case: Search suggestions
3:35 - Use case: Form submission
4:35 - Coding Solution

leetcode 2627

#neetcode #leetcode #python

[FatCowFat]

thanks for showing real world examples since they are very useful and makes the problem practical

[victornorman]

This was a really good tutorial, the perfect amount of depth and good examples, 10/10. Keep up the great work! <3

[Android-]

Wow I also didn't know we could pass undefined in clearTimeout😟

Thank you!

[Arttturslv]

I spend so much time thinking how to identify if the call was already made, but the solution was so simple lol

[jaylee]

Correct me if i'm wrong, but we still have to return the id at the end?

[tsunghan_yu]

I know it's not needed but why does passing in ...args to the callback function fail? I have to use `() => fn(...args)` instead.

var debounce = function(fn, t) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout((...args) => fn(...args), t);
}
};

EDIT: it's because setTimeout lets you call the callback with optional parameters and we didn't pass them in. Like this `setTimeout(functionRef, delay, args)`, but the callback function `(...args) => fn(...args)` doesn't work and it has to be (args) => fn(...args).

[learnerforlife]

i did apply almost the same logic but instead of always calling the clearTimeout i used an IF statement. But i don't know why it isn't giving the desired output.
Code:
var debounce = function(fn, t) {
var called = false;
var id;
return function(...args) {
if(called){
called = false;
clearTimeout(id);

}else{
id = setTimeout(()=>fn(...args), t);
called = true;
}

}
};

[vixguy]

Day 15 of doing the 30-day challenge with neetcode