clearInterval Polyfill in JavaScript - Detailed Explanation

In this blog, we will focus on building the clearInterval polyfill in JavaScript, which stops a running interval created by our custom setInterval. This not only helps you prepare for interviews but also gives you a deeper understanding of how JavaScript timers work under the hood.

Table of Contents

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

Expected scenarios for clearInterval polyfill

Before coding, let’s think about what the built-in clearInterval does.

Normally, clearInterval is used to stop a repeating timer started by setInterval.

For our polyfill, we should cover these scenarios:

• ✅ The function should accept an interval ID returned by the custom setInterval.
• ✅ It must stop future executions of the callback.
• ✅ It should handle multiple intervals independently.
• ✅ The interval must not run again after being cleared.

Implementation of clearInterval polyfill in JavaScript

To make clearInterval, we will also need a custom setInterval polyfill that can be stopped. Let’s build both.

clearInterval polyfill code with example

// Store active intervals
const intervalStore = {};

function mySetInterval(callback, delay, ...args) {
  const id = Math.random().toString(36).slice(2);
  let active = true;

  function run() {
    if (!intervalStore[id]) return; // stop if cleared
    callback(...args);
    intervalStore[id] = setTimeout(run, delay); // schedule next call
  }

  intervalStore[id] = setTimeout(run, delay);
  return id;
}

function myClearInterval(id) {
  clearTimeout(intervalStore[id]); // stop the next scheduled call
  delete intervalStore[id];       // remove from store
}

// Example usage:
const intervalId = mySetInterval(() => {
  console.log("Runs every 1 second!");
}, 1000);

setTimeout(() => {
  myClearInterval(intervalId);
  console.log("Interval stopped!");
}, 4000);

Explanation of the clearInterval polyfill

1. Storing active intervals

const intervalStore = {};

function mySetInterval(callback, delay, ...args) {
  const id = Math.random().toString(36).slice(2);
  function run() {
    if (!intervalStore[id]) return; 
    callback(...args);
    intervalStore[id] = setTimeout(run, delay);
  }
  intervalStore[id] = setTimeout(run, delay);
  return id;
}

1. We generate a unique id for each interval.
2. The run function executes the callback, then schedules the next execution using setTimeout.
3. This mimics the behavior of the real setInterval.
4. The interval keeps running as long as it exists in intervalStore.

3. Custom clearInterval implementation

function myClearInterval(id) {
  clearTimeout(intervalStore[id]);
  delete intervalStore[id];
}

1. clearTimeout stops the scheduled callback.
2. delete intervalStore[id] ensures no further calls happen.
3. Once removed, the run function will detect that the interval is cleared and stop.

4. Example usage

const intervalId = mySetInterval(() => {
  console.log("Runs every 1 second!");
}, 1000);

setTimeout(() => {
  myClearInterval(intervalId);
  console.log("Interval stopped!");
}, 4000);

1. The callback runs every second.
2. After 4 seconds, we call myClearInterval, which stops future executions.

What Next

• ✳️ Check out setTimeout polyfill in JavaScript
• ✳️ Check out setInterval polyfill in JavaScript
• ✳️ Check out clearTimeout polyfill in JavaScript
• ✳️ Best resources to prepare for Polyfills in JavaScript