clearTimeout polyfill in JavaScript - Detailed Explanation

Frontend interview for experienced folks required to test on the javascript internals and implementation of polyfills are the best way to evaluate the understanding of timers working under the hood. Understanding clearTimeout polyfill in JavaScript are one of those questions to understand the internals.

In this blog, we will focus on implementing a  clearTimeout polyfill. By the end, you will know how to stop a timer created by your own custom setTimeout function.

Table of Contents

• Understand scenarios to cover as part of clearTimeout polyfill
• Implementation of clearTimeout polyfill in JavaScript
  • clearTimeout polyfill code with example
  • Explanation of the clearTimeout polyfill
• What's Next

Understand scenarios to cover as part of clearTimeout polyfill

Before polyfill implementation, Its important to know what the built-in clearTimeout function does. Normally, clearTimeout is used to stop a scheduled timeout created by setTimeout. Let's see an example

// Schedule a timeout to log a message after 3 seconds
const timeoutId = setTimeout(() => {
  console.log("This message will not appear because we cleared the timeout");
}, 3000);

// Cancel the timeout after 1 second
setTimeout(() => {
  clearTimeout(timeoutId);
  console.log("Timeout cleared before execution.");
}, 1000);

For clearTimeout polyfill, we need to handle below use-cases:

• ✅ The function should accept a timer ID returned by our custom setTimeout polyfill.
• ✅ It should stop the timer so that the callback does not run if the delay hasn’t completed.
• ✅ It should work with multiple timers, not just one.
• ✅ The cancellation must work before the timeout finishes.

Implementation of clearTimeout polyfill in JavaScript

To implement clearTimeout, we first need a custom setTimeout polyfill that gives us a way to cancel the timer. Then, we can build clearTimeout on top of that.

clearTimeout polyfill code with example

// Custom setTimeout polyfill
const timers = {}; // store active timers

function mySetTimeout(callback, delay, ...args) {
  const timerId = Math.random().toString(36).substring(2); // unique ID
  let start = Date.now();

  function check() {
    // Do nothing if timer cleared
    if (!timers[timerId]) return;

    if (Date.now() - start >= delay) {
      callback(...args); // execute callback
      delete timers[timerId]; // remove from active timers
    } else {
      requestAnimationFrame(check); // keep checking
    }
  }

  timers[timerId] = true; // mark timer as active
  requestAnimationFrame(check);
  return timerId;
}

// Custom clearTimeout polyfill
function customClearTimeout(timerId) {
  delete timers[timerId]; // remove timer so it stops executing
}

// Example usage:
const id = mySetTimeout(() => {
  console.log("This will not be logged, because we clear it!");
}, 3000);

// cancel before it runs
customClearTimeout(id); 

Step by Step Explanation of the clearTimeout polyfill

Here is how the above code works, step by step:

Tracking timers

• We use an object timers to keep track of the active timers.

Custom setTimeout - mySetTimeout

• It creates a unique ID for every timer. Simple unique id can be generated using Date.now() as well.
• Uses requestAnimantionFrame to check repeatedly if the delay has passed.
• If the delay is reached, the callback is executed and the timer is removed from the timers object.
• If the timer is cleared before that, the check function stops because timers[timerId] no longer exists.

Custom clearTimeout - customClearTimeout

• It simply deletes the timer ID from the timers object.
• This prevents the callback from running if the delay hasn’t finished.

Example usage

• We schedule a timeout, then immediately cancel it using customClearTimeout(id).
• As a result of custonClearTimeout, the callback never executes.

What's Next

Here are the other important blog posts, which you should explore next

❇️ Check out setTimeout polyfill in JavaScript

❇️ Check out clearInterval polyfill in JavaScript

❇️ Check out setInterval polyfill in JavaScript

❇️ Find Best resources to prepare for Polyfills in JavaScript