Execute the setInterval function without delay the first time

Custom & Immediate setInterval Wrapper

Let's create setIntervalImmediately. It's like setInterval, but with a caffeine shot - it kicks into action immediately!

function setIntervalImmediately(func, interval) {
  func(); // Fires the function like there's no tomorrow
  return setInterval(func, interval); // Follows up with relaxing regular intervals
}


Call this function similarly to setInterval, with an immediate first call to keep things spicy!

function shoutOut() {
  console.log("You're awesome!");
}

// Our encouraging message is delivered instantly
const intervalId = setIntervalImmediately(shoutOut, 2000);


Perks of Custom Wrappers

Using our custom setIntervalImmediately wrapper treats us to:

• Zero delay: First function invocation is faster than your shadow.
• Flexibility: Toggle back to setInterval as quickly as changing socks.
• Readability: Say what you do and do what you say! The wrapper helps our code stay true to strict mode.
• Adaptability: Allows space to incorporate additional parameters for enhanced function calls.
• Maintainability: The interval Id still behaves well with clearInterval.

But remember! Beware of potential event stacking if your function is slower than a tortoise, use setTimeout in a loop instead to avoid asking more than your function can chew!

Safer setInterval Alternative

If your function takes ages to complete, use a safer, setTimeout pattern to ensure there's a break between the function calls. Here's a pumped-up version of setTimeout

function robustSetInterval(func, interval) {
  function wrapper() {
    func();
    // Set time out ensures our function isn't more overwhelmed than a shopping center on Black Friday!
    setTimeout(wrapper, interval);
  }
  wrapper();
}

robustSetInterval(shoutOut, 2000);


This way, our function gets to work instantaneously, and then takes a breather for at least your specified interval before the next call.

Best Practices

When dealing with timing functions, these nuggets of wisdom may prove useful:

• Know your territory: Validate the support for non-standard approaches on your target browsers - compatibility is key.
• Code clarity: A readable code is a maintainable code. Opt for simplicity when possible over complex designs.
• Listen to the community: Other answers and their votes provide precious insight and reliable perspectives.
• Never stop learning: Implement popular patterns like IIFE for their versatility.