Throttling in Javascript | Walmart Frontend Interview Question

[@medamsaisirisha847]

Had faced an interview question almost a year back to limit the network calls to API, now after watching your videos finally got the answer which I have been searching for, thanks to linkedin which brought me here to your channel. Explained it really well sir.

[@bonleofen]

Bro, start a patron page. You just nailed it in explaining.

[@MaylynnNg]

This is FANTASTIC. Made it so simple and easy to understand. Been struggling reading articles for hours trying to get it, and you've done it in 20 minutes!! Thank you thank you thank you!!

[@mayankkumawat8802]

highly underrated channel... keep doing the great job

[@Nikhilkumar-yh7yc]

In debouncing one , i was little confused but because of this one that video also got cleared .. the part i love in this video , You told us how to write it step by step .. A Infinite thanks.. Please cover many important topics in your Namaste JS series .. You are like a GOD for me in Frontend journey .. I know you are very busy .. but 1 lakh people is waiting for your next videos .. Please do .. A respect for U .. Akshay Sir -- A great tutor..

[@danielbentum136]

same to me Bro

[@Nikhilkumar-yh7yc]

Akshay Saini - A Tutor for the people , who think they never be a good developer.. Last Year i started a journey for frontend deveolper. I got confusions in , Callback, this, call bind and apply, clousers , curring , scopes .. literally i was struggling . I came to your old series Core fundamental of JS. nd I was like what this guy wanted to tell . I didnt like you .. then after sometime i found your namaste JS nd i am confident in this all topics that i mentioned ... Now I m growing stronger day by day .. I m watching your old series nd i m getting it very clearly ..

[@JavaScriptWithSohail]

Awesome video! But I think there is no need to store the context and arguments in variables, it makes sense in the debounce but here we are not calling the function in setTimeout so we can directly use "this" and "arguments".

[@mattwaala]

yeah make sense :)

[@jaishrikrishna5755]

can you explain why we use this and arguments when we call Settimeout

[@Adam-nw1vy]

​@@jaishrikrishna5755 We use this to prevent losing the this context. The function throttle is meant to be reusable and able to take in any callback function, i.e. fn, which means that the callback can be something that looks like objectName.callback. So if we invoke throttle like this: throttle(objectName.callback, limit), then the this context will refer to objectName, which can cause many issues. To prevent that, we need to bind the "this" context to the inner function returned by throttle. For the arguments, we need to use them to pass along any arguments taken by the callback function.

[@santoshkadam8431]

I'm regretting, why I couldn't find this channel before year or more.

[@bonleofen]

You deserve a genuine like and subscription. Thanks for the video.

[@bidishadas832]

A very well-explained video. You know, everyone explains the difference between throttling and debouncing. But writing a new throttle function is just a different level altogether.

[@dhirajbhujade5108]

This channel is goldmine for JavaScript developers!

[@GhanshyamDobariya90]

20:06 do you know why we used apply method . No I won’t tell you here.... Lol.... bro honestly every time I see your videos here... i fall in love in learning.. and yes style of your explanation is v good and easy...

[@akshaymarch7]

😅

[@sachin__ak]

@@akshaymarch7 call also can be used, you just need to unpack the array(...args), apply is mostly not used after es6 released

[@159binny]

These days interviewers are using the examples even given by you. One person asked me how do you limit Clicks in a game and the same story you described. What a revolution you have brought.

[@javidg4197]

bro, u just nailed it man . Expecting more videos from you. all the best

[@neocephei45]

I dont usually comment but I'm gonna start doing it! Even if the video is old It help me quite a lot! I will have to rewatch a few times to deeply understand it to apply it to my code, but I understand the main idea. Thank you!

[@akakiburjanadze2387]

Dude your videos are simply amaizing! I have learned 10x more than that what I knew before and feel so much confident in my JavaScript knowledge. Big Thanks!

[@anonymous........]

20:13 --> Here `apply` method takes an array of arguments. This can be useful when you don't know how many arguments will be passed to the function.

[@Shahrukh-p2z]

Thank you so much for sharing your knowledge i learned so much from you no one taught me this even in my company

[@imranshaikh115]

Very good explanation akshay, may god filled you with a lot of knowledge. Thanks a lot for making us understand a complex concepts in an easy way, you made it simple and clear.

[@02sonali]

This could not be explained in any better way. Superlike !!

[@hanifabeg1699]

Really you make every topic easy by explaining it more clearly.... Nice!!!! 👍

[@dhruvitgaloriya7358]

I just say thank you Akshay for making such a good video and clear concept and doubts.This is first comment ever in KZbin

[@nitishgupta8393]

I have just watched a genius, you are gem man

[@RavindraSingh-zg9eq]

what an explaination bhai amazing superb ,i have seen this code but i was asking myself why they r writing this line of code but u explained very clearly ,mostly i was having doubt with args but u explained veryy nice

[@mayankkumar6091]

Debounce, Throttling and their difference, you have explained it excellently. Now we don't need to go anywhere else to study and understand them :). It is now all set in our mind. What I noticed is we need to include an extra return statement if flag is not true.. something like following If(!flag) return; Otherwise it will not throttle as intended because multiple setTimeout are going to be registered and they would mess up flag value. function throttleOne(fn, ms) { let flag = true; function wrapper(){ if(!flag) return; if(flag){ fn.apply(this, arguments); flag = false; } setTimeout(function(){ flag = true; }, ms); } return wrapper; } let betterthrottleOne = throttleOne(expensive, 3000);

[@DeepakGupta-zz1vf]

Instead do this if(flag === true) { fn(); flag = false; setTimeout(function () { flag = true; },limit); } This will not register more than once

[@yeswanthh5068]

I really miss the old akhsay😥😓

[@rohitkudalkar92]

feel very to found your channel. Love and support bhai.

[@ritsk4338]

Awesome video... yesterday only I found your channel and now become a big fan. Very Informative videos. Thank alot.

[@atwinedan9364]

first time here and i couldnt resist to like and subscribe. thx man

[@0mb430]

onChange event of input control is great example for throttling

[@srikarkulakcherla2202]

Bhai, I love you♥️😂 Seriously man, learnt a lot from this playlist,thanks and keep posting more of this content... Would be nice if you made a video on this keyword

[@rahulpurohit2461]

You're the best man!

[@srikanthac9458]

Man , your videos are so clear cut , just a suggestion do show it on the computer as well , maybe like using debugger or something , so that everyone can understand even better.

[@akshaymarch7]

Throttling is similar to Debouncing. I showed the demo in debouncing video, please go watch that then everything will be relatable. 😇

[@srikanthac9458]

@@akshaymarch7 oh okay cool

[@shanusaini945]

Great Video... 15:20 for anyone who want to see the code.

[@adityakalyani6668]

Do you know why we use apply here...??No I will not tell you here...... Dude tooo good, you yourself are laughing at that... I paused and laughed for a while thinking about those who haven't watched the earlier videos.!! Amazing videos and good humour

[@jeckyanand717]

Ashay... Great explanation with easy steps. Love to learn from you

[@itsMohak]

You are terrific.

[@kashifalikhan4420]

Awesome Explanation, Loved the way you explain the things

[@utkarshtripathi2349]

Very well explained, Thanx for publishing that much informative content.

[@akshaymarch7]

Glad it was helpful!

[@sumanthchevula1601]

@@adityaagarwal2324 same doubt, did u get any answer for this?

[@kikish_sabina]

Very clear explanation 👍🏻👍🏻👍🏻 thank you!

[@pradeeplakshminarasimha8332]

Your explanation is really good bro. Keep making more such videos.

[@AdnanAli-cp9hk]

Awesome explanation Sir, thank you so much.

[@sachin__ak]

debounce executes on the last event fired(batch req) and throttle executes at starting(control flow)

[@FunOfHeuristic]

nice one bro, one small suggestion, please add cards or give the link of related video in the description.

[@EpicKeyz]

Greeeeeat explanation! I thought on how can I make "onresize" function calls more lightweight, that's where throttling comes. Thanks a lot for this video!

[@PeaceUrSoul]

Thanks Bro for sharing your knowledge, keep make more videos by selecting the topic and explain with example. Also please tell what challenges you face in coding on Uber projects. Thanks

[@aparupabanerjee9373]

You explain really well! Could you please make a separate video on Closure? Thank you so much for all the help! :) Good luck!

[@sahilsatishkumar]

0:00 Intro 0:58 Context/Recap 4:20 code (whiteboard)

[@Aman-Verma]

Hi Akshay, very nicely explained. But there is one edge case that you missed. Could you explain a way to solve that. Edge case:- Suppose the delay is 1 sec. But if the user ends up typing within 1 sec. then I think this would cause issue, as the function would not be executed (even though the flag would be true but, to execute the function user needs to enter something but in this case he already entered before 1 sec i.e before setTimeout sets the flag to true)

[@sravanirebba364]

yeah. Thanks for raising this.I am also waiting for answers in this scenario and I think this handles mentioned scenario. function throttleOne(fn, ms) { let flag = true; function wrapper(){ if(!flag) return; if(flag){ fn.apply(this, arguments); flag = false; } setTimeout(function(){ flag = true; }, ms); } return wrapper; } Got this from comments.

[@dheerajsingh8049]

When the user types for the first time, the event registered to keyup or keydown runs, and the registered function is called. 1. As for the first time the flag is true, it enters the if condition and calls the function which contains the API call. 2. After that in the next line we marked the flag as False and then the setTimeout function is called. 3. The setTimeout() gets registered in the browser Web environment and waits for the timer(1 sec here) to expire. 4. As soon as the timer is expired the setTimeout() body is executed and the flag is marked to true again. Note that if in between(before 1 sec expires) the user types- In this case, the event handler would call the throttle function, however, as the flag is set to false when it run last time, it would not enter the if condition and the function making API call is not executed. Even if the user types 100 characters in 1 sec. 1. As soon as 1 sec expires the setTimeout would set the flag to true. 2. When the user types for the 101st time, the throttle function would then call the function which would make an API call(or any other code as defined). Let me know if that works for you. Note that the lecture was in context to attain Throttling.

[@ranjanprabhu789]

Nice one. This will surely help a lot of people to understand js core better. Keep sharing more such videos. Thank you.

[@Flora-lc6qd]

Best video explaination!!!!

[@pramodhjajala8021]

Outstanding explanation from not an IIT ,NIT guy 😉

[@nikitabanthiya5846]

Hey Akshay , Nicely done !! explained it properly .I'm liking your channel , can you answer more what they asked in Wallmart other than this ?

[@jagrutitiwari2551]

Your JavaScript videos have always helped me. Could you make a video on interview questions for Full Stack JavaScript Developer.

[@snehakamble229]

Very good explanation.

[@adyraj9228]

liked your approach bro. how desperately you want people to understand what you are saying... (y)

[@Hdsatija]

Great Explanations

[@akshaymarch7]

It will be coming up in Namaste JavaScript Series. Actually teaching Closures requires a little background knowledge for the audience. We'll move there definitely, but slowly. And trust me, I'm very desperate about covering that topic. I just love Closures. ❤️

[@Hdsatija]

@@akshaymarch7 Thanks

[@dheerajmantena6672]

Amazing video by Akshay, thanks for being generous in sharing your knowledge that means a lot for the upcoming dev's....Keep going , sharing is caring...!!!!

[@rohangaonkar8912]

Awesone video. just like to add that there may be cases where we would want to catch the last occurence of event. so with this we might miss last event so. we need one more closure var to account for that

[@soumyaranjanhota9338]

Awesome Video ...

[@manthananeja]

munna bhaiya , garda mcha diye aap

[@manishapuri8419]

your videos are really very detailed and easy to understand .. :) keep it up

[@lokeshlokesh-fx8le]

In throttling, This flag method is easily understandable when compared to cleartimeout(timer) method.

[@mohit0001ish]

I really like your explanation!! Thumbs up, keep it up. :)

[@banajittalukdar8236]

Well explained sir, expecting more videos

[@ashishnamdeo3620]

Really Bro. your video is awesome...... plz make another video like javascript DS & more on Js...

[@alpacino3989]

Amazing concept!

[@amitk0277]

Pls make tuts on web app optimization and interview questions

[@tanmay496]

Thanks it's now clear

[@Atavija]

Akshay very good Thanks !!!

[@jaisaram5239]

Please post video series on PWA

[@Pepcoding]

throttle function mei se let flag = true ko bahar nikale bina throttle nahi karega. har returned function ne alag flag pe closure bna lia hai. sab returned functions ko same flag pe closure bnana hoga isko sahi chalne ke liye.

[@nehabhargava]

You made it so easy, a very nice explanation! Can you please also cover a video about Event emitters from scratch.

[@akshaymarch7]

Noted it down, Neha. Will try to cover that in future videos. Thank you for your input. ❤️

[@YallahYah]

Your videos are 🔥🔥🔥

[@Alex-cc3ol]

I would use clearTimeout instead of flag function throttle(callback, delay) { let timer; return function() { const context = this; const args = arguments; window.clearTimeout(timer); timer = window.setTimeout(() => callback.apply(context, args), delay); } }

[@prateekbanga3074]

He used this technique to implement Debouncing but not throttling

[@Alex-cc3ol]

@@prateekbanga3074 yeah, I got that later

[@abhijiths148]

Then that won't be throttling anymore

[@rushivani454]

Please do it in pc also after explaining it in board. So that we can see how it works and code is error free

[@jashanpreet832]

Yaar tu great hai

[@ravinderkumar5316]

nice explanation

[@hiteshbasera6426]

Awesome. Thanks!

[@ashimasingla5177]

Awesome Video!! Can you please explain other method also for thrashing using setTimeout because way you explain makes things really easy. Also can you please make a video on Walmart Interview Experience for UI developers.

[@ranjithagowda9676]

Great content.

[@pradeexsu]

this is nice one, thanks, akshay what if we are hitting simultaneously sufficient number of request, does we need a lock mechanism, or is flag enough?

[@_irrfan13_]

will throw a referenceError - can not access before initialization. thank you akshay !

[@remysilvio]

Great video! You rock! I'm subscribed too!

[@prikshit8]

Amazing 🤩

[@adithyabhat4770]

Thanks for the video!

[@harshvarma3960]

ur beard look like "hellboy2" u cn take it as a compliment :

[@vipulpathe9071]

How about using setInterval instead of setTimeout in this case? By the way, all your videos are really helpful! Thanks for efforts!! :)

[@kunalthakur2974]

HI Vipul, Use setInterval and write a console line inside it , you will know. The setInterval will keep resetting the flag after the delay again and again. Reference :- function throttle(func, delay) { let flag = true; return function () { if (flag) { func(); flag = false; setInterval(() => { flag = true; console.log(`${flag} is called from timer`); }, delay); } else { return; } }; } const funct = () => { console.log("This call is Throttled"); }; let better = throttle(funct, 4000); better(); better(); better(); setTimeout(better, 5000);

[@surajbhushanpandey2882]

Sir, I am Mern Stack Developer. There is small request that if you can please upload some competitive programming Problems on regular basis, so that we can brush up coding challenges

[@bhavyaratra5461]

My implementation that i tried. hope it's also a valid example ? const throttle = (fn,delay)=>{ let timer; return function(){ if(timer===undefined || Date.now()-timer >= delay){ //timer will be undefined in the first function call fn(); timer = Date.now(); } }

[@devtest1814]

Thanks !!! keep it up bro !!! :)

[@srikanthkolisetty5921]

Thank you akshay

[@prateekchitransh1585]

Awesome content. I am confused why didn't we use setInterval here.

[@TheVR7]

great video, i believe youtube live chats timeouts works on this principle, just guessing

[@susmitobhattacharyya1668]

What a content. But have a doubt that don't we need to clear the timeouts like we did in the debouncing?

[@OveekChatterjee]

Hi Akshay, First of all thank you soo much for such wonderful explaination of all these Js concepts Just one quick query, what would be the corner case where the context and args will be used and how will they work. I know about the Apply method but how till linking the"this" and "arguments" will help in this case is not clear to me thank you in advance!

[@parthlashkari7537]

It's because if expensive method accepting params such as expensive(x,y) then arguments variable which is acting as an array will accept these arguments so that you don't have to pass them manually and context is for this like which object is calling it for an instance

[@gunasekart.j3552]

your explanation is good, I get more positive vibes after seeing your videos, keep doing your good work. I am currently a full stack developer who has a basic knowledge is javascript.....................I have a doubt in this video when user click the button continuously whether the throttle function is called multiple time or not ....or only the return function inside the throttle function is called....can u please explain if you have time..thanks in advance

[@gokulsrinivasan8563]

Hi Akshay, I have a question. you have initialized flag as true inside throttle function. When ever that function is called, flag will be true by default and the API will be made. I think you have to maintain flag as true outside throttle function.

[@Aman-Verma]

Actually throttle function is called only once. Therefore, flag will not be reinitialised again and again to true. And with the help of closures, the returned function will remember the value of flag. Hope i am clear

[@yusufmirkar6508]

I dont think this context needs to be added here as func is not called inside setTimeout where intended this would be replaced with window reference. You have called func in same flow as context variable. this does not change for this flow.

[@KevJaques]

One of the first things to do is prevent further clicks by making the button idempotent!