setTimeout Polyfill in JavaScript - Detailed Explanation

setTimeout in JavaScript is a very commonly used function to add a delay in the execution of a callback function, and understanding the internal workings of setTimeout gives a solid understanding of asynchronous JavaScript.

In this post, we will learn how to implement a simple polyfill for setTimeout using JavaScript

Table of Contents

• Expected scenarios for setTimeout polyfill
• Implementation of setTimeout polyfill in JavaScript
  • setTimeout polyfill code with example
  • Explanation of the setTimeout polyfill

Expected scenarios for setTimeout polyfill in JavaScript

Let’s go through what all the expected scenario needs to be fulfilled by the custom setTimeout function in JavaScript:

✅ It should take a callback function to execute later.

✅ It should accept a delay time (in milliseconds) after which the callback should run.

✅ It should optionally accept arguments to pass to the callback.

✅ It returns a timer ID that can be used to clear the timeout using clearTimeout.

Implementation of setTimeout polyfill in JavaScript

Here is the implementation code of the setTimeout polyfill in JavaScript 

setTimeout polyfill code with example

In this polyfill implementation code, requestAnimationFrame is used to mimic the delay loop, since we are not allowed to use setTimeout itself.

🚀 Check out the live code - setTimeout in JavaScript

function mySetTimeout(callback, delay, ...args) {
   // Validate input arguments
   if (typeof(callback) != 'function') throw new Error("callback should be a function");
   if (typeof(delay) != 'number' || delay < 0) throw new Error("delay should be a positive number");

  // Generate a unique ID for this timeout
  const timerId = Math.random().toString(36).substring(2);

  // Record the start time
  const start = Date.now();

  // Create a function that checks if enough time has passed
  function check() {
    const current = Date.now();
    if (current - start >= delay) {
      callback(...args); // Call the callback with provided arguments
    } else {
      // Keep checking until delay is reached
      requestAnimationFrame(check);
    }
  }

  // Start checking
  requestAnimationFrame(check);

  // Return an timeId that can be used for clearInterval
  return timerId;
}

// Example usage
mySetTimeout(() => {
  console.log("Greet hello after 2 seconds");
}, 2000);

Explanation of the setTimeout polyfill

Here is the step-by-step explanation of the setTimeout polyfill Implementation

Function signature

In the code mySetTimeout function accepts below arguments, similar to the setTimeout implementation in JavaScript

• callback → the function to run later.
• delay → how long to wait (in milliseconds).
• ...args → optional arguments to pass to the callback when it runs.

Validate Input Arguments

• Validate callback function type and the delay to ensure the function input is valid.

Timer ID generation

• In this step a random timerId gets generated using Math.random().
• This helps in uniquely identifying each timeout instance that will be returned from the function and can be used later in clearTimeout

Recording the start time

• Using Date.now(), it store the time when mySetTimeout is called.

Checking the delay

• We define a function check() which compares the current time with the start time.
• If the required delay has passed, we execute the callback with any arguments provided.
• If not, we schedule another check using requestAnimationFrame(check).

Returning the timer ID

• Finally, we return the timerId, this ID can be used to clear the timeout using clearTimeout function.

What's Next

❇️ Check out clearTimeout polyfill in JavaScript

❇️ Check out clearInterval polyfill in JavaScript

❇️ Check out setInterval polyfill in JavaScript

❇️ Find Best resources to prepare for Polyfills in JavaScript