วีดีโอ

I think you shouldn't use any helper functions like reduce as they are not allowed in interviews most of the time.

This may be a cleaner solution class AnalyticsSdk { #queue = []; #analyticsFn; #waitInterval; #retriesCount; #sendingInProgress = false; constructor(sendAnalytics, waitInterval = 1000, retriesCount = 1) { this.#analyticsFn = sendAnalytics; this.#waitInterval = waitInterval; this.#retriesCount = retriesCount; } logEvent(event) { this.#queue.push(event); if (!this.#sendingInProgress) { console.log("Start the process of sending events"); this.#sendingInProgress = true; this.#send(); } } async #send() { const event = this.#queue.shift(); console.log( `Inside Send: Time: ${new Date().getSeconds()}, event: ${event}` ); let i = 0; while (i <= this.#retriesCount) { try { await this.#analyticsFn(event); break; } catch (_e) { console.log(`-----------------Error Sending: ${event}--------------`); i++; } } if (this.#queue.length > 0) { setTimeout(this.#send.bind(this), this.#waitInterval); } else { this.#sendingInProgress = false; } } } let counter = 0; function sendAnalytics(event) { return ++counter % 5 === 0 ? new Promise((resolve, reject) => { setTimeout(() => { console.log(`Error!!: ${event}`); reject(`Error!!: ${event}`); }, 500); }) : new Promise((resolve, reject) => { setTimeout(() => { console.log(`Success!!: ${event}`); resolve(`Success!!: ${event}`); }, 500); }); } const sdk = new AnalyticsSdk(sendAnalytics); sdk.logEvent("event 1"); sdk.logEvent("event 2"); sdk.logEvent("event 3"); sdk.logEvent("event 4"); setTimeout(() => { console.log("***********RESTART************"); sdk.logEvent("event 5"); sdk.logEvent("event 6"); sdk.logEvent("event 7"); sdk.logEvent("event 8"); sdk.logEvent("event 9"); sdk.logEvent("event 10"); }, 10000);

thank you

I got this question in a interview and I was able to code the js part not the css part. will learn it now.

I think its a bit misleading, 17:45 when state updates, it doesnt run cleanup function because the useEffect is with empty dependency array. The issue is initially canStart is false, and so slideMove fn before going in useEffect initial mount still holds false

Bit difficult to understand that how useEffect cleanup get's called during update with an empty dependency array.

Thank you ... Read more Read eloquent js 2:55 Javascript30.com 4:40 Read eloquent js again 5:34 Traversy media build 5 projects 5:55 Page life cycle 7:10 Critical Rendering path 7:49 Library/framework 9:25 1 to 2 projects using library/framework 12:20 Job hunt 13:20 Problem solving easy med 16:17 Sde 2 17:22 Advance js 17:59 Web.dev 19:27 Engineering blogs 21:40 Quality projects 23:06 Adv FE dev and med to hard 24:35

Hi Prashant Why are we using setTimeout here? Without that too, we could have done the throttling, no?

Bhai espe video banana please Build a search bar with denouncing and throttling

The condition is not correct for circle. Two circles will intersect if the difference between their radius is smaller than the distance separating their centers : correct answer is : const distance = Math.sqrt( (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2) ); if ( distance -r1 - r2 <= 0) { return true; } ;

This was a little difficult to understand

Way too few people talk about this. And if you are a beginner and still learning react, debugging this can be frustrating as it's not as common bug. Thanks for the video!

Is this really asked for SDE1 role ? I am scared

Hey I have taken your frontend system design course. I am not able to figure it out how to start. Like from which topics I have to start from that book. Can you please guide me , I am preparing first time for system design

thanks

do we have to do this in js or reactjs in interview??

but this is specific to whole window what if we want to implement the same but in a component scrolling context

Your knowlege on frontend is impressive. I'm a huge fan of you, you are like arpit bhayni of frontend

3G+ ???? where do you live on Antarctica? because I got 5G in my hand in tier 3 city a year and half back

Thanks a lot sir, this was really inspiring 🙏🙏

*Last one is way Complex* !

😑😑😑

Within the else block, when there is a `lastRan`, why do you need to check if (Date.now() - lastRan >= delay) before calling the fn? Isn't that repetitive because we are already setting the delay with the new timeout (lastTimerid) with: delay - (Date.now() - lastRan)?

*****reduce solution***** function asyncTask() { const random = Math.floor(Math.random() * 10); console.log({ random }); return new Promise((resolve, reject) => { setTimeout(() => { if (random < 5) resolve(`resolved ${random}`); else reject(`rejected ${random}`); }, 1000 * random); }); } const task6 = () => asyncTask(); const task7 = () => asyncTask(); const task8 = () => asyncTask(); const task9 = () => asyncTask(); const task10 = () => asyncTask(); const asyncOperations = [task6, task7, task8, task9, task10]; function executeAsyncTasksUsingReduce(tasks, callback) { const resolvedTasks = []; const rejectedTasks = []; let count = 0; tasks.reduce((acc, curr, index, arr) => { return acc.finally(() => { return curr() .then((res) => resolvedTasks.push(res)) .catch((err) => rejectedTasks.push(err)) .finally(() => { count++; if (count === arr.length) callback(rejectedTasks, resolvedTasks); }); }); }, Promise.resolve()); } executeAsyncTasksUsingReduce(asyncOperations, (err, res) => console.log({ err, res }) ); ***** for-of solution ***** function asyncTask() { const random = Math.floor(Math.random() * 10); console.log({ random }); return new Promise((resolve, reject) => { setTimeout(() => { if (random < 5) resolve(`resolved ${random}`); else reject(`rejected ${random}`); }, 1000 * random); }); } const task1 = () => asyncTask(); const task2 = () => asyncTask(); const task3 = () => asyncTask(); const task4 = () => asyncTask(); const task5 = () => asyncTask(); const asyncOps = [task1, task2, task3, task4, task5]; async function executeAsyncTasksInSequence(tasks, callback) { const resolvedTasks = []; const rejectedTasks = []; for (let task of tasks) { console.log({ resolvedTasks, rejectedTasks }); try { const response = await task(); resolvedTasks.push(response); } catch (err) { rejectedTasks.push(err); } } callback(rejectedTasks, resolvedTasks); } executeAsyncTasksInSequence(asyncOps, (err, res) => console.log({ err, res }));

Can you please check my code and let me know whether this is correct or not. I still don't get why chop is needed, when we can just do slice in code? why to complicate it. const mapLimit = async (array, limit, iteratee) => { return new Promise((res, rej) => { let results = []; let idx = 0; async function next() { if (idx < array.length) { const subArray = array.slice(idx, idx + limit); const asyncCalls = subArray.map(async (value) => { return new Promise((resolve, reject) => { iteratee(value, (error, result) => { if (error) { rej(error); reject(error); } else { resolve(result); } }); }); }); const resultVals = await Promise.all(asyncCalls); results = results.concat(resultVals); idx += limit; next(); } else { res(results); } } next(); }); }; const asyncIterateeFunc = (val, callback) => { setTimeout(() => { const res = val * 2; callback(null, res); }, 1000); // 1 sec for each, if only 1000 and no random; }; const arr = [1, 2, 3, 4, 5]; mapLimit(arr, 2, asyncIterateeFunc) .then((res) => console.log("mapLimit: ", res)) .catch((err) => console.error("mapLimit: ", err));

Hi Prashant, Nice video. I think you have missed the `typeOf` keyword before checking for the type of second condition in line 11

Great video ! And naice images

I was asked this question in my phone screen meeting during an Amazon process. Luckily, I had a good understanding of recursion, and I could move to the final round.

😭😭 kuchh samajh nhi aa rahaa, i think i am not able to make it

Thanks Prashant. Can you also make video on variations of this problem ? Ex - i) At one time only 3 progress bars can be active, if user clicked 4 times, 4 progress bar will start only once first three has been compled. ii) How to implement it without using setTimeout() That will be helpful.

Hii Prashant, Here's my solution for the same const obj = { a: { b: (a, b) => a+b, c: { e: (a, b, c) => a+b-c }, }, d: (a, b, c) => a - b - c, e: 1, f: null, g: "" } const calculate = (...args) => { const [obj, ...remaining] = args; return Object.entries(obj).reduce((acc, [key, value]) => { const type = typeof value; if(type === "function") { acc[key] = value(...remaining); }else if(value && type === "object" && !Array.isArray(value)) { acc[key] = calculate(value, ...remaining); }else { acc[key] = value; } return acc; }, {}); } const fn = (obj) => { return (...args) => { return calculate(obj, ...args); } } console.log(fn(obj)(1, 1, 1))

Good approach. However for me, using one dummy node without contents and observing it with IntersectionObserver works well over remembering this formula. whenever this dummy node is visible or intersection I load more data, and move this dummy node towards the end.