Implementing a Custom `setInterval` in JavaScript

Implementing a custom setInterval function in JavaScript involves creating a function that mimics the behavior of the native setInterval function, which repeatedly executes a callback function at specified intervals. This can be particularly useful for understanding how repeated asynchronous operations work in JavaScript. In this episode, we'll create a custom setInterval function using JavaScript's built-in capabilities.

What is setInterval?

setInterval is a native JavaScript function that repeatedly executes a specified function or piece of code at specified intervals (in milliseconds).

Real Interview Insights

Interviewers might ask you to:

• Implement a custom version of setInterval.
• Ensure the function mimics the behavior of the native setInterval.
• Handle edge cases, such as cancelling the interval.

Implementing Custom setInterval

Here’s an implementation of a custom setInterval function:

function customSetInterval(callback, interval) {
  let intervalId = null;
  let isCancelled = false;
 
  function runCallback() {
    if (!isCancelled) {
      callback();
      intervalId = setTimeout(runCallback, interval);
    }
  }
 
  intervalId = setTimeout(runCallback, interval);
 
  return {
    clear: () => {
      clearTimeout(intervalId);
      isCancelled = true;
    },
  };
}

Explanation:

• Interval Handling: Use setTimeout recursively to mimic setInterval.
• Callback Execution: Execute the callback function at specified intervals.
• Cancellation: Provide a method to cancel the interval.

Practical Examples

Consider examples with different intervals and callbacks:

const interval1 = customSetInterval(() => {
  console.log('Interval 1 executed every 1000ms');
}, 1000);
 
const interval2 = customSetInterval(() => {
  console.log('Interval 2 executed every 2000ms');
}, 2000);
 
// Cancel the second interval after 5000ms
setTimeout(() => {
  interval2.clear();
  console.log('Interval 2 cancelled');
}, 5000);

Handling Edge Cases

1. Immediate Execution: Handle cases where the interval is zero or negative.
2. Cancel Interval: Provide a method to cancel the interval before it executes.

Enhanced Implementation with Immediate Execution Handling

function customSetInterval(callback, interval) {
  if (interval <= 0) {
    callback();
    return { clear: () => {} };
  }
 
  let intervalId = null;
  let isCancelled = false;
 
  function runCallback() {
    if (!isCancelled) {
      callback();
      intervalId = setTimeout(runCallback, interval);
    }
  }
 
  intervalId = setTimeout(runCallback, interval);
 
  return {
    clear: () => {
      clearTimeout(intervalId);
      isCancelled = true;
    },
  };
}
 
// Example usage with edge cases
const interval3 = customSetInterval(() => {
  console.log('Interval 3 executed immediately and repeatedly');
}, 0);
 
const interval4 = customSetInterval(() => {
  console.log('Interval 4 should not execute');
}, 1000);
 
interval4.clear();

Use Cases for Custom setInterval

1. Learning: Understanding how repeated asynchronous operations work in JavaScript.
2. Polyfills: Creating a polyfill for environments where setInterval is not available.
3. Advanced Control: Providing advanced control over interval functionality in specific scenarios.