JavaScript Timers

Run code later or repeatedly with setTimeout and setInterval.

Lesson 39 of 56Intermediate13 min read

Sometimes code shouldn't run right now. You might want to show a message for three seconds, update a clock every second, or wait until someone stops typing before running a search. JavaScript's timers, setTimeout and setInterval, handle all of these.

Timers are also your first taste of asynchronous code: code that's scheduled to run later while the rest of the program carries on. Understanding how timers behave makes the later lessons on Promises and async/await much easier.

setTimeout: run once, later

JavaScript
const id = setTimeout(() => {
  console.log("3 seconds later");
}, 3000);
  • The first argument is the function to run.
  • The second is the delay in milliseconds, where 1000ms is one second.
  • It returns an id you can use to cancel the timer: clearTimeout(id).

Pass the function itself, not the result of calling it. setTimeout(showMessage(), 3000) runs showMessage immediately.

setInterval: run again and again

JavaScript
const id = setInterval(() => {
  console.log("tick");
}, 1000);

clearInterval(id); // stop it

Always keep the id so you can stop the interval later. An interval with no way to stop it runs until the visitor leaves the page, which wastes battery and can pile up if you accidentally start it twice.

Timers don't pause your code

JavaScript doesn't wait at a setTimeout. It schedules the function and carries straight on to the next line. Even setTimeout(fn, 0) runs after the current code has finished. This "asynchronous" behaviour is the foundation of Promises and async/await.

The delay is also a minimum, not a guarantee. If the browser is busy, or the tab is in the background, the function may run later than requested. For an accurate clock, read the current time with new Date() on each tick rather than counting ticks.

Passing arguments and cleaning up

Extra arguments after the delay are passed to your function: setTimeout(greet, 1000, "Ana") calls greet("Ana") after one second. Most people find an arrow function clearer: setTimeout(() => greet("Ana"), 1000).

Timers keep running until they finish or you cancel them, even if the part of the page they update has been removed. In bigger apps, always clear intervals when a component closes or a user navigates away, otherwise they keep using memory and battery, and may try to update elements that no longer exist. For animation, use requestAnimationFrame instead of a fast interval, as shown in the canvas lesson.

JavaScript Timers Syntax

Timers

const t = setTimeout(fn, 1000);  // run once after 1s
clearTimeout(t);                 // cancel it

const i = setInterval(fn, 500);  // run every 0.5s
clearInterval(i);                // stop it

JavaScript Timers Summary

  • setTimeout runs a function once after a delay in milliseconds.
  • setInterval runs a function repeatedly at a fixed interval.
  • Both return an id; use clearTimeout or clearInterval to cancel.
  • Timers are asynchronous: the rest of your code keeps running.
  • Debouncing waits for a pause before running code, such as a search.

JavaScript Timers Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

Order of execution

Predict the order before you press Run.

console.log("1. Start");

setTimeout(() => {
  console.log("3. Timeout finished");
}, 1000);

setTimeout(() => {
  console.log("2.5. Zero-delay timeout");
}, 0);

console.log("2. End of script");
ConsoleEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1Runs immediately.
  2. Lines 3 to 5Scheduled for 1 second later. The script doesn't wait.
  3. Lines 7 to 9Even with 0ms, it waits until the current script is finished.
  4. Line 11Runs before both timeouts.
Example 2

A countdown

const clock = document.querySelector("#clock");
const go = document.querySelector("#go");

go.addEventListener("click", () => {
  let seconds = 5;
  clock.textContent = seconds;
  go.disabled = true;

  const timer = setInterval(() => {
    seconds--;
    clock.textContent = seconds > 0 ? seconds : "🚀 Liftoff!";
    if (seconds === 0) {
      clearInterval(timer);
      go.disabled = false;
    }
  }, 1000);
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 9Run every second and keep the id.
  2. Lines 10 to 11Count down and update the page.
  3. Lines 12 to 15At zero, stop the interval and re-enable the button.
Example 3

Debounced search

Type quickly. The "search" only runs once you pause.

const search = document.querySelector("#search");
const status = document.querySelector("#status");
let timer;

search.addEventListener("input", () => {
  clearTimeout(timer);
  status.textContent = "Typing…";
  timer = setTimeout(() => {
    status.textContent = `Searching for "${search.value}"`;
    console.log("Search sent:", search.value);
  }, 400);
});
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3Remember the latest timeout id between keystrokes.
  2. Line 6Each keystroke cancels the previous scheduled search…
  3. Lines 8 to 11…and schedules a new one 400ms later. Only the last one survives.

Common JavaScript Timers Mistakes

Calling the function instead of passing it

Don't
setTimeout(showMessage(), 2000); // runs immediately
Do
setTimeout(showMessage, 2000);
setTimeout(() => showMessage("Hi"), 2000);

Seconds instead of milliseconds

Don't
setTimeout(save, 5); // 5 milliseconds, not 5 seconds
Do
setTimeout(save, 5000);

Never clearing an interval

Don't
button.addEventListener("click", () => {
  setInterval(tick, 1000); // every click starts another one!
});
Do
let timer;
button.addEventListener("click", () => {
  clearInterval(timer);
  timer = setInterval(tick, 1000);
});

JavaScript Timers in Real Projects

Timers in everyday interfaces

Toast notifications that disappear after a few seconds, auto-saving drafts, slideshows, typing indicators, session timeouts, the countdown on an OTP code, and debounced search boxes all rely on timers.

JavaScript Timers Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Log "Hi" once after 2 seconds.

(() => console.log("Hi"), );
Predict the outputmedium

In what order are the letters logged?

setTimeout(() => console.log("A"), 0);
console.log("B");
setTimeout(() => console.log("C"), 0);
console.log("D");
Multiple choicemedium

How do you stop an interval?

Fix the bugmedium

This should log tick exactly 3 times and then done, but it never stops. Fix it.

let count = 0;

setInterval(() => {
  count++;
  console.log("tick");
  if (count === 3) {
    console.log("done");
  }
}, 100);
ConsoleEdit the code, then press Run or Ctrl+Enter
Checks
  • Ticks exactly 3 times then done

JavaScript Timers Quiz

3 questions to check what you learned.

  1. What unit is the delay in setTimeout?

    • Seconds
    • Minutes
    • Frames
    • Milliseconds

  2. Does setTimeout pause the rest of your code?

    • No. It schedules the function and the code continues immediately
    • Yes
    • Only for long delays
    • Only in loops

  3. What is debouncing?

    • Running code faster
    • Waiting until events stop for a moment before running code
    • Repeating code forever
    • Removing bugs automatically

JavaScript Timers Challenge

Toast notification

When #save is clicked:

  1. Show #toast by adding the class show
  2. After 1500ms, remove the show class
  3. If the button is clicked again before it hides, restart the timer (use clearTimeout)
const save = document.querySelector("#save");
const toast = document.querySelector("#toast");
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Clicking shows the toast
  • It hides after about 1.5s
  • Uses clearTimeout

Related JavaScript topics

36EventsReact to clicks, typing, form submits and key presses.48PromisesHandle results that arrive later with then, catch and Promise.all.17FunctionsPackage code into reusable, named blocks with inputs and outputs.
Esc
↑↓ to navigateEnter to open