Loading...
Loading...
Schedule code to run later or repeatedly. setTimeout & setInterval.
Browsers and servers spend most of their time waiting: for network responses, timers, and user input. Async JavaScript lets your program stay responsive while work happens in the background using callbacks, Promises, and async/await.
Learn Timers in JavaScript: covering setTimeout, setInterval, Clearing Timers, Timer Quirks with interactive visual examples and step-by-step explanations.
Synchronous code runs one line at a time. But real applications wait for network requests, file reads, and timers. Async JavaScript lets your program keep running while that work happens in the background: without freezing the UI.
This module covers the full async story: callbacks, Promises, async/await, and the Fetch API. Visual timelines show when tasks enter the queue, when they resolve, and why async/await is syntactic sugar over Promises, not magic.
Understanding timers is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals, and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.
Run code once after a delay.
// Basic syntax: setTimeout(callback, delayInMs); // Example: setTimeout(() => { console.log("Hello after 2 seconds!"); }, 2000); console.log("This runs first!");
setTimeout schedules a function to run after a specified delay (in milliseconds). Code after setTimeout runs immediately: it doesn't wait.
Run code repeatedly at a fixed interval.
// Runs every 1 second: let count = 0; const id = setInterval(() => { count++; console.log(`Tick ${count}`); if (count >= 5) { clearInterval(id); // stop after 5 ticks } }, 1000); // Output (one per second): // "Tick 1" // "Tick 2" // "Tick 3" // "Tick 4" // "Tick 5" (then stops)
💡 setInterval returns an ID you can use to stop it later with clearInterval(id). Always clear intervals when done!
Cancel scheduled timers before they fire.
// clearTimeout: cancel a one-time timer: const timeoutId = setTimeout(() => { console.log("This never runs!"); }, 5000); clearTimeout(timeoutId); // cancelled! // clearInterval: stop a repeating timer: const intervalId = setInterval(() => { console.log("tick"); }, 1000); // Stop after 5 seconds: setTimeout(() => { clearInterval(intervalId); console.log("Stopped!"); }, 5000);
setTimeout
Cancel with clearTimeout(id)
Runs once (if not cleared)
setInterval
Cancel with clearInterval(id)
Runs repeatedly until cleared
Timers are not precise: here's why.
// Quirk 1: Minimum delay is ~4ms (browser) setTimeout(() => console.log("hi"), 0); // Doesn't run at 0ms! Minimum is ~4ms // AND it waits for the call stack to be empty console.log("first"); // this ALWAYS runs first
setTimeout(fn, 0) doesn't mean 'run now'. It means 'run as soon as possible after current code and any pending tasks finish'.
Debounce and throttle: essential timer patterns.
// Debounce: wait until user STOPS doing something function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; } // Only search after user stops typing for 300ms: const search = debounce((query) => { fetchResults(query); }, 300); input.addEventListener("input", (e) => search(e.target.value));
// Throttle: run at most once per interval function throttle(fn, interval) { let lastTime = 0; return (...args) => { const now = Date.now(); if (now - lastTime >= interval) { lastTime = now; fn(...args); } }; } // Update position at most every 100ms: window.addEventListener("scroll", throttle(() => updatePosition(), 100) );
Common questions about timers.