Platform under construction

Async JavaScript

Advanced

Timers

Timers schedule work for later or repeatedly, but they are scheduling tools, not precise real-time clocks.

const id = setInterval(updateClock, 1000);

clearInterval(id);

Async JavaScript

setTimeout runs once; setInterval repeats until cleared.

setTimeout schedules a callback after a delay. setInterval schedules repeated callbacks at roughly the interval you request.

Both return an id. You can pass that id to clearTimeout or clearInterval to cancel scheduled work.

Timers can drift when the main thread is busy or the tab is backgrounded. Do not use them as perfect clocks.

setTimeout

Schedule one callback for later.

clearTimeout

Cancel a pending timeout.

setInterval

Run repeatedly.

clearInterval

Stop repeated work.

Examples

Async code should show state, handle failure and avoid stale results.

Store timer ids for cleanup

const intervalId = setInterval(updateStatus, 1000);

stopButton.addEventListener("click", () => {
  clearInterval(intervalId);
});

Starting intervals without a stop path

setInterval(updateStatus, 1000);

// This keeps running until the page unloads.

Code patterns

Reusable examples for quick reference.

These examples are the async patterns you will reuse: timers, promises, composition, await, fetch and cancellation.

Run later

One delayed callback.

const id = setTimeout(() => {
  showMessage();
}, 1000);

Cancel timeout

Stop before it fires.

clearTimeout(id);

Repeat work

Run on an interval.

const id = setInterval(update, 1000);

Recursive timeout

Useful when each step decides the next delay.

function tick() {
  update();
  setTimeout(tick, 1000);
}

Rules that matter

Make time visible in your code.

Async JavaScript is easier when every operation has clear pending, success, failure and cancellation behavior.

Store timer ids

You need the id to cancel.

Clear intervals

Repeating work should have a stop path.

Expect drift

Timers wait for the main thread.

Avoid many intervals

Centralize repeated work where possible.

Use recursive timeout for flexible delays

It avoids overlapping interval work.

Do not block inside timers

Heavy callbacks still freeze the page.

Production thinking

Reliable async code is what makes modern interfaces feel fast instead of fragile.

Why does this matter?

Timers are common in UI feedback, polling, animation helpers and delayed actions.

Accessibility

Timed UI should not remove content before users have time to read or interact.

Production note

Production timer code needs cleanup when panels close, components unmount or polling stops.

SEO note

Timer-delayed critical content can be missed or delayed for users and crawlers.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the interval delay.
Disable Start while the timer runs.
Replace setInterval with recursive setTimeout.

Practice assignment

Do this before moving to the next topic.

Start a timeout or interval.
Store its id.
Cancel it safely.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Timers.