Implement your own setInterval and clearInterval methods without using setTimeout/clearTimeout

DORSETRIGS

3 min read

·

06-10-2024

7

0

Share

Building Your Own setInterval and clearInterval from Scratch

Have you ever wondered how JavaScript's built-in setInterval and clearInterval functions work under the hood? These powerful tools allow us to execute code at regular intervals, but what if you want to understand their inner workings and build your own versions without relying on setTimeout and clearTimeout?

Let's embark on a journey to create custom setInterval and clearInterval methods using fundamental JavaScript concepts!

The Problem: Replicating setInterval and clearInterval

Imagine you need to implement a timer that updates the time every second without using setTimeout or clearTimeout. This scenario highlights the need for a custom setInterval function. Similarly, you might need to stop that timer gracefully, which is where a custom clearInterval function comes in handy.

Our Approach: Leveraging JavaScript's requestAnimationFrame

The key to our custom implementation lies in the requestAnimationFrame method. This function allows us to schedule tasks to be executed before the next repaint of the browser. It provides a reliable and efficient way to create a smooth animation loop, which we can adapt for our timer.

The Code: Crafting the Custom Functions

// Custom setInterval implementation
function customSetInterval(callback, delay) {
  let startTime = performance.now();
  let timeoutId = null;

  function loop() {
    const now = performance.now();
    if (now - startTime >= delay) {
      callback();
      startTime = now;
    }
    timeoutId = requestAnimationFrame(loop);
  }

  timeoutId = requestAnimationFrame(loop);

  return timeoutId;
}

// Custom clearInterval implementation
function customClearInterval(timeoutId) {
  cancelAnimationFrame(timeoutId);
}

// Example Usage
let timerId = customSetInterval(() => {
  console.log("Timer Tick!");
}, 1000); // Executes every second

// Stop the timer after 5 seconds
setTimeout(() => {
  customClearInterval(timerId);
}, 5000);

Explanation: Unveiling the Magic

1. customSetInterval(callback, delay): This function accepts a callback function to execute and the delay in milliseconds.
2. startTime and timeoutId: We store the initial timestamp (startTime) and the animation frame ID (timeoutId) for reference.
3. loop() function: This function checks if the elapsed time has reached the desired delay. If it has, it executes the callback function and updates the startTime.
4. requestAnimationFrame(loop): We use requestAnimationFrame to schedule the loop() function for the next repaint, ensuring smooth execution.
5. customClearInterval(timeoutId): This function simply calls cancelAnimationFrame with the provided timeoutId to stop the animation loop.

Insights and Benefits:

• Precision: Our custom setInterval relies on requestAnimationFrame which is optimized for browser rendering. This can lead to more consistent timing compared to the built-in setInterval which might be influenced by other tasks running in the browser.
• Control: We have complete control over the timer's behavior, allowing for more complex scenarios than the standard setInterval.
• Flexibility: You can easily modify the code to implement additional functionalities like pausing, resuming, or changing the delay dynamically.

Additional Considerations:

• The customClearInterval function depends on the unique timeoutId returned by customSetInterval. Ensure you use it correctly to stop the desired timer.
• Browser compatibility: While requestAnimationFrame is widely supported, consider using a polyfill for older browsers.
• Performance: The customSetInterval might have a slight performance overhead compared to the built-in version, especially if you have a large number of timers running simultaneously.

Conclusion: Embracing the Power of requestAnimationFrame

By understanding the inner workings of setInterval and clearInterval, we can confidently build our own custom versions using requestAnimationFrame. This exercise provides a deeper understanding of JavaScript's event loop and empowers you to implement more tailored timing solutions.

Remember, understanding the fundamentals of web technologies is crucial for building efficient and performant applications. Keep exploring and experimenting with different approaches to enhance your JavaScript skills!