setInterval polyfill in JavaScript - Detailed Explanation

In frontend interviews, it’s common to get questions that test your understanding of JavaScript internals. One such question is to implement the polyfill of setInterval. It helps you understand how browser timers work, how callbacks are scheduled, and how you can build these functionalities using plain JavaScript. This is primarily asked of the experienced frontend folks to evaluate their understanding of the internals.

In this blog, we will learn to implement a setInterval polyfill in JavaScript with a step-by-step explanation. The goal is to make it super easy to understand.

Table of Contents

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

Understand scenarios to cover as part of setInterval polyfill

Let's first see how the setInterval works in JavaScript to understand its working

let count = 0;

// Function which needs to call on interval
function logCounter() {
  count++;
  console.log(`Counter: ${count}`);

  // Stop after 5 iterations
  if (count === 5) {
    clearInterval(intervalId);
    console.log("Interval stopped!");
  }
}

// Call logCounter after 1000 ms ~ 1 Sec
const intervalId = setInterval(logCounter, 1000);

Before implementing the polyfill, we should know all the scenarios that polyfill needs to handle handle. Here are the cases

• ✅ Repeatedly calls the input function with a fixed time delay between each call.
• ✅ Accepts arguments to pass to the callback function.
• ✅ Returns an interval ID which can be used to stop it with clearInterval.
• ✅ Should keep calling the callback until it is explicitly cleared.

Implementation of setInterval polyfill in JavaScript

Here is the implementation of setInterval polyfill with a detailed step-by-step explanation. 

setInterval polyfill implementation code

setTimeout function is used to implement the setInterval polyfill, which will make sure to call the function after a certain delay.

function mySetInterval(callback, delay, ...args) {
  // Generate unique alphanumeric ID like - lx3g6s6g
  let timerId = Math.random().toString(36).substring(2); 
  let isCleared = false;

  function repeat() {
    if (isCleared) return;
    callback(...args); // execute the callback
    // schedule the next execution
    setTimeout(repeat, delay);
  }

  // start the loop
  setTimeout(repeat, delay);

  // return an object to control interval
  return {
    id: timerId,
    clear: () => { isCleared = true; }
  };
}

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

// Stop after 5 seconds
setTimeout(() => {
  interval.clear();
  console.log("Interval cleared");
}, 5000);

Explanation of the setInterval polyfill

Let’s go through every step one by one

• Creating a unique Id
  • We generate a random string using Math.random() to identify this interval instance. This can also be done by simple methods like Date.now() as well.
• Flag for clearing the interval
  • isCleared starts as false.
  • When we call clear(), it becomes true, and stop the future calls.
• Recursive scheduling
  • Use built-in setTimeout function to call the function after certain delay, and use it inside a function repeat().
  • After calling the callback, we schedule the next execution by calling setTimeout(repeat, delay).
• Starting the interval
  • The first call to setTimeout(repeat, delay) starts the loop. This is the starting point for the recurring call after a delay.
• Returning control to the user
  • We return an object that contains the interval ID and a clear() function to stop it.
  • This is similar to how the real clearInterval works, this is just to cover the polyfill of setInterval without involving the actual code for clearInterval

What’s next?

• Check out setTimeout polyfill in JavaScript
• Check out clearInterval polyfill in JavaScript
• Check out clearTimeout polyfill in JavaScript
• Best resources to prepare for Polyfills in JavaScript