Solve Recent Facebook FrontEnd developer Interview question
After I’m researching a lot on web, I came to a conclusion that, there is no tutorial/video series that is dedicated for MAANG(Meta, Apple, Amazon, NetFlix, Google) preparation for FrontEnd developers. So, I decided to decode most common interview questions of MAANG in my Youtube channel. In this article I will discuss a very interesting problem. So, read till the end.
Question: Clear all the timeouts present on a screen.
Company that asked this question: Facebook/Meta
Your usual thought process: Use clearAllTimeout method and clear the timeouts.
Problem with the approach: There is no function called clearAllTimeout in JavaScript. There is only clearTimeout function.
Some basic information about timeout
setTimeout function is used to achieve asynchronous tasks in JS. Return value of setTimeout is an Integer. This value can be passed to clearTimeout method to clear that timeout.
Ex: const x = setTimeout(() => {}, 1000); // x could be any number ex: 1
clearTimeout(x) // this will clear the timeout created above.
One can read more about setTimeout in this official documentation.
Why this question is important
When user navigates from page one to page two and timeout created on page one is timed out after user navigated to page two then page one’s timeout will take memory to execute, which is unintended.
Solution: Somehow we need to keep a track of timeouts and finally clear them.
Solution 1: Global variable approach.
Keep a global array and push all the return values of timeout into that array and when user living that page, clear all those timeouts.
var timeoutArr = [];const timer1 = setTimeout(() => {console.log('Time 1')}, 1000)
timeoutArr.push(timer1);const timer2 = setTimeout(() => {console.log('Time 2')}, 1000)
timeoutArr.push(timer2);timeoutArr.forEach(item => clearTimeout(item))
This could be an acceptable solution for Tier 2/3 companies. If you are aspiring for companies like Facebook/Meta then you need to write slightly optimal approach.
Solution 2 : Utility file approach.
Rather using global array use array inside the utility file.
Working code
export const TIMER_UTIL = {
timerArr: [],
setTimeout: function(fn, delay){
const id = setTimeout(fn, delay);
this.timerArr.push(id);
},
clearTimeout: function(){
while(this.timerArr.length){
clearTimeout(this.timerArr.pop())
}
}
}TIMER_UTIL.setTimeout(() => console.log('First timer'), 1000)
TIMER_UTIL.setTimeout(() => console.log('Second timer'), 1000)
TIMER_UTIL.clearTimeout();
We can import TIMER_UTIL across different files and call TIMER_UTIL.setTimeout which will create a timeout and push the values into an array.
When you’re living the page, you can call TIMER_UTIL.clearTimeout(); which will clear all the timeouts that are created so far.
Thank you for reading catch you in next article. If you have not followed me on Medium, please follow. Do not forget to subscribe to my Youtube Channel,
In case if you want to talk to me personally for mock interview, tips and tricks to clear interview or resume review, you can book a session here:
If your preparing for frontEnd developer interview, please watch below series of mine:
If you want to learn JavaScript custom implementations of built in method, then watch below series of mine:
