setInterval Scheduling

`setInterval` schedules a callback to run repeatedly with a requested delay between timer firings. It does not guarantee exact periodic execution because callbacks run only when the event loop can process them.

In browser JavaScript, `setInterval(callback, delay)` registers a repeating timer and returns an identifier that can later be passed to `clearInterval`. The delay specifies when the callback becomes eligible to run; it is not a promise that the callback will start at exactly that time.

The callback is placed into the event loop's task scheduling system after the interval expires. If the main thread is executing other JavaScript, rendering work, or another task, the interval callback must wait. This means actual execution times can be later than the requested interval.

A slow callback can also affect repeated execution. JavaScript on the main thread runs one piece of JavaScript at a time, so an interval callback cannot execute concurrently with itself or with other JavaScript. Applications that need to avoid overlapping asynchronous work often use a recursive `setTimeout` pattern instead, scheduling the next operation after the current work reaches the desired point.

Intervals are useful for tasks such as periodically refreshing UI data, updating a clock display, or polling when approximate timing is sufficient. They should be cleared when no longer needed, especially for components that mount and unmount, to avoid unnecessary work and retained references.

Key points

• `setInterval` schedules a callback repeatedly until it is cleared.
• The delay is a minimum scheduling threshold, not an exact execution guarantee.
• A busy main thread can delay an interval callback.
• Use `clearInterval` to stop a repeating timer.
• Use recursive `setTimeout` when each next run should depend on completion of the previous run.

Interview questions

Why might a `setInterval` callback run later than expected?

Browser JavaScript normally runs on the main thread, and only one JavaScript task executes at a time. If the thread is busy with another task, the interval callback has to wait. Therefore, the requested interval is not a guarantee of exact execution timing.

What does `setInterval` do?

`setInterval` registers a callback that can run repeatedly after a specified delay. It continues scheduling the callback until `clearInterval` is called. The delay controls when the callback becomes eligible, not an exact execution timestamp.

When would you choose `setTimeout` recursion instead of `setInterval`?

Recursive `setTimeout` is useful when the next execution should be scheduled based on what happened during the current execution. For example, an application can wait for an asynchronous request to finish before scheduling another request. This can reduce the risk of starting repeated work without considering whether the previous operation has completed.

Can `setInterval` callbacks overlap with each other?

JavaScript callbacks on the same main thread do not execute simultaneously. However, an interval can initiate asynchronous work whose completion happens later, and subsequent interval callbacks may start before earlier asynchronous operations finish. That can create overlapping operations even though the JavaScript callbacks themselves are not running concurrently.

What lifecycle concern should a frontend engineer consider when using `setInterval`?

A component or page can stop needing the interval while the timer is still registered. If it is not cleared, the callback can continue running and perform unnecessary work. UI code should therefore keep the timer identifier and call `clearInterval` during the appropriate cleanup step.