Debouncing in Javascript | Flipkart UI Interview Question
Комментарии:
Hi Akshay,
Because of your true efforts to learn and let others learn, i today got selected in amazon. Thanks a lot 🙏
ES6 version of this solution :
let counter = 0;
const fetchFunc = (e) => {
console.log("Fetching data...", counter++,e);
};
const debounce = (functionRef, timeInMS) => {
let timer;
return (e) => {
clearTimeout(timer);
timer = setTimeout(()=> functionRef(e), timeInMS);
};
};
const debounceFunc = debounce(fetchFunc, 300);
2023 Attendace
Ответить
completed
Ответить
What about when the user copy and paste the content on the search, waiting is not necessary in this case. How can we solve this? Should we have another event listener for paste and update the debounce timer?!
Ответить
// Those who have faced issue while trying to use function arguments inside debounce, try this:
const getData = ( time ) => {
console.log('fetched data at time: ' + time );
}
const debounce = (fn, d, args) => {
let timer;
return () => {
let context = this;
clearTimeout( timer );
timer = setTimeout(() => {
fn.apply( context, args );
}, d);
}
}
const debouncedGetData = debounce( getData, 300, [ new Date() ] );
// call debouncedGetData() on keyup event.
i dont think so in this case .apply() will gets called as we dont have any object or anything to call it under.
Directly call fn() under setTimeout
<input type="text" onkeyup="betterfunction()">
<script>
let count = 1;
function getData() {
//here you can call api to get data.
console.log("Hello!", count++);
}
function debounce(fun, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(fun, delay);
}
}
const betterfunction = debounce(getData, 500);
</script>
there's a small issue
Use the provided function, not getData();
return function () {
clearTimeout(timer);
timer = setTimeout(fun, delay);
}
Thank You😇😊
I dont understand this. My below code is giving the same result. Why needed cleartimeout ?
<html>
<input id="name" type="text" onkeyup="abc()" />
</html>
<script>
function abc() {
let xx;
xx = setTimeout(() => {
console.log(document.getElementById("name").value);
}, 300);
}
</script>
Great lecture. Minor correction: inside debounce method you have used getData.apply(), it should be fn.apply() as the parameter is fn
Ответить
That was helpful
ОтветитьThanks man.
Ответить
sir please make video on async and await.
Ответить
Created some unused variables to make it look complex
Ответить
Its true that its all about how we think logically while coding. Its still confusing for me why we need to clear the timer here.
Ответить
🙏🙏🙏🙏 please reply
so every time we go inside dosome magic
Let Timer ;
reinitialize or holds the previous value ???
Or js initialize timer only one time 1st time after that how many time it sees. let timer ; it does not care
this concept is important
jab se maine Akshay bhaiya k namaste javascript video ko dekhna start kra exdm se love hone lga javascript mein.
Ab main kitne bhi hours javascript mein code kru mereko boring ni lgta.
Thankyou so much bhaiya for making these kinda videos.
very nice explanation agian :) 😅😅
Great explanation. I am bit confused about the role of arguments and context here. How can we use them? Please explain.
Ответить
Hello Akhay, great video and got to learn a lot as always, but I have a doubt, I'm able implement the same functionality with below code:
let timer;
const getData = () => {
clearTimeout(timer);
timer = setTimeout(() => {
console.log("Fetching Data ...");
}, 300);
};
and one more doubt, why we cannot invoke getData function by fn(); directly, instead of fn.apply(contest, args), am I missing something?
Anyone can explain, why we have used this and args in the function?
Ответить
Hi Akshay, I think on line no 14 we shouldn't call directly getData we already have a parameter name "fn"
Ответить
Crystal clear bro. Thank you bro.
Ответить
Hi @Akshay and everyone, I tried using this [without using apply, args and this] and it seems to be working, any problem with this approach ?
const getData = () => {
console.log("//api call");
};
const debounce = (fun, d) => {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fun();
}, d);
};
};
const betterFunction = debounce(getData, 500);
Superb
Ответить
Hey It is an amazing video to learn on debouncing. Thanks a lot
Ответить
Sir, please add nodejs interview question like process.nexttick and setimmediate. like questions.
Ответить
In case if anyone looking for shorter version:
const debounce = (fn, wait) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(fn, wait, ...args);
}
}
Thank you Akshay...
Ответить
Thanks askay .. clearly understood
Ответить
why are we returning a function in dosomemagic , can't we directly write time out code in outer function?
Ответить
@Akshay Saini instead of calling getData hardcoded function in debounce function we can call the arguments fn
Ответить
Hello Akshay. I understood everything but what is "FN" people are commenting here. I really don't understand use of fn?
Ответить
Hello Akshay! Thanks a lot for your tutorials! They are amazing!
I have a question: Why do you and many sites on the internet show this example using ARGS and THIS, if you could simplify and make something like this that is much easier and straightforward to understand. This is tested and working! What am I missing here?
import * as React from 'react';
export default function App() {
function debounce(cbFunc, timeout = 300){
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(() => {
cbFunc()
}, timeout);
};
}
function fetchDataHandler(){
console.log('Fetching data from API');
}
const fetchData = debounce(() => fetchDataHandler(), 500);
return (
<div>
<h2>Search API</h2>
<input onChange={fetchData}/>
</div>
);
}
Yesterday I couldn't answer this question in an interview and now m learning from your videos!
Ответить
why args if you're not passing it on fn.apply?
Ответить
Can we not write doSomeMagic as a arrow function ?
Ответить
thank you so much akshey vai
Ответить
bhaiya every video is new eye opener in itself!
Ответить
What if you don't use apply?
Ответить
Hello akshay,
I tried implementing the same with multiple arguments in angular 8. But event is firing upon calling debounce function
Amazing explanation @Akshay Saini 🙌
I have query:- You have passed args like
args = arguments :- Are that the arguments which we can pass in the getData function?
I have tried to pass some arguments and tried to access it but it doesn't work
let is block scoped. How does clearTimeout(timer) have a reference to a previously created timer? Can anyone clear my doubt please
Ответить
Very good explanation @Akshay. However there are few bugs and unused variables in the code.
1. You haven't used 'fn' param in debounce function, though you have passed the 'argument' - 'getData' from 20th line.
2. If you had used the 'fn' param in the setTimout function, you would have avoided the getData function in line no.15
3. If you had adjusted the 2nd point right, you wouldn't need to keep the reference of 'this' and 'arg' unnecessarily, It would have automatically keeps the outer function params value intact. ( That's what closure does).
Hi Akshay, can you make a more detailed video on call,apply and blind for binding this context when used inside currying function.
Ответить
Let contex = this and args = argument? Can someone help me in the
Ответить
If you are confused why timer variable need to defined outside of the anonymous function, that is closure !!!
Ответить
