Summary

The article discusses a common Facebook/Meta front-end developer interview question, focusing on how to clear all timeouts on a webpage, and provides two solutions to manage and clear timeouts efficiently.

Abstract

The author, who has researched extensively on web development, identifies a gap in the preparation material for front-end developers targeting MAANG companies (Meta, Apple, Amazon, Netflix, Google). To address this, they have created a YouTube series to decode common interview questions, including a particular problem faced during a Facebook interview: clearing all timeouts on a screen. The article explains the usual approach of using clearAllTimeout (which does not exist in JavaScript) and the correct method involving clearTimeout. It highlights the importance of this question due to potential memory leaks when timeouts persist after page navigation. The author presents two solutions: the first uses a global array to track and clear timeouts, while the second, more optimal approach, employs a utility file to encapsulate timeout management. The article concludes with an invitation to follow the author on Medium and subscribe to their YouTube channel for more insights and interview preparation resources.

Opinions

The author believes that there is a lack of specialized preparation material for front-end developers aiming for MAANG companies.
They suggest that using a global array to manage timeouts might be acceptable for lower-tier companies but not for MAANG companies, where a more optimal approach is expected.
The author emphasizes the importance of efficiently managing timeouts to prevent unintended memory usage, which can occur when timeouts are not properly cleared after a user navigates away from a page.
The author promotes their own content as a valuable resource for interview preparation, including a YouTube series and personal sessions for mock interviews and resume reviews.
They advocate for the utility file approach as a best practice for managing timeouts in a scalable and maintainable way.

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:

https://topmate.io/vasanth_bhat

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: