setTimeout vs setInterval in JavaScript

setTimeout vs setInterval in JavaScript

setTimeout and setInterval are the two main timer functions in JavaScript. They schedule callbacks but behave differently.

setTimeout: Run Once After a Delay

setTimeout(() => console.log("once"), 1000);
``
The callback runs **once** after at least 1000ms. It does not repeat.

### `setInterval`: Repeat at a Fixed Interval

```js
const id = setInterval(() => console.log("tick"), 1000);
// logs "tick" every 1000ms
// stop it:
clearInterval(id);
``
The callback runs every 1000ms until `clearInterval` is called or the page is closed.

### Key Differences

| Feature | `setTimeout` | `setInterval` |
|---|---|---|
| Runs | Once | Repeatedly |
| Cancel with | `clearTimeout(id)` | `clearInterval(id)` |
| Next run | Scheduled after the callback finishes | Scheduled from the start of each interval |

### The `setInterval` Timing Problem

`setInterval` schedules the next call from the **start** of the interval, not from when the callback finishes. If the callback takes longer than the interval, calls can overlap or queue up.

```js
setInterval(() => {
  // if this takes 2 seconds but interval is 1 second,
  // the next call is scheduled before the previous finishes
}, 1000);
``
Browsers handle this by not running overlapping intervals (they wait for the current callback to finish), but the timing is not exact.

### Recursive `setTimeout` for Accurate Intervals

For more control, use recursive `setTimeout`:

```js
function repeat() {
  console.log("tick");
  setTimeout(repeat, 1000);
}
repeat();
``
The next call is scheduled **after** the callback finishes. This guarantees the interval is at least 1000ms between the end of one call and the start of the next.

### When to Use `setTimeout`

- One-off delayed actions (show a message after 3 seconds).
- Recursive `setTimeout` for self-correcting intervals.
- Deferring work to keep the UI responsive.

### When to Use `setInterval`

- Simple repeating actions where exact timing is not critical.
- Polling (check for updates every 5 seconds).
- Animations (though `requestAnimationFrame` is better for visuals).

### Cleaning Up

Always clear timers when they are no longer needed, especially in SPAs:

```js
useEffect(() => {
  const id = setInterval(() => fetchUpdates(), 5000);
  return () => clearInterval(id); // cleanup
}, []);
``
### The Takeaway

`setTimeout` runs once after a delay. `setInterval` repeats at a fixed interval. `setInterval` can have timing issues if the callback takes longer than the interval. Use recursive `setTimeout` for accurate intervals. Always clear timers when done (`clearTimeout`/`clearInterval`).