Docs
18.5-Timers-and-Scheduling
11.5 Timers and Scheduling
Overview
JavaScript provides several mechanisms for scheduling code execution: setTimeout, setInterval, requestAnimationFrame, and requestIdleCallback. Understanding these is essential for creating responsive and performant applications.
┌──────────────────────────────────────────────────────────────────┐
│ Timer Methods Overview │
├──────────────────────────────────────────────────────────────────┤
│ │
│ setTimeout(fn, delay) │
│ ───────────────────── │
│ Execute ONCE after delay (milliseconds) │
│ │
│ Time ─────────────────────────────────────▶ │
│ |←── delay ──→| │
│ ┌─────────────┐ │
│ │ waiting │ → fn() called │
│ └─────────────┘ │
│ │
│ setInterval(fn, interval) │
│ ───────────────────────── │
│ Execute REPEATEDLY at interval │
│ │
│ Time ─────────────────────────────────────▶ │
│ |←─ int ─→|←─ int ─→|←─ int ─→| │
│ fn() fn() fn() │
│ │
│ requestAnimationFrame(fn) │
│ ───────────────────────── │
│ Execute before next repaint (~60fps = ~16.67ms) │
│ │
│ requestIdleCallback(fn) │
│ ─────────────────────── │
│ Execute when browser is idle │
│ │
└──────────────────────────────────────────────────────────────────┘
setTimeout
┌──────────────────────────────────────────────────────────────────┐
│ setTimeout │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Syntax: │
│ ─────── │
│ const timerId = setTimeout(callback, delay, ...args) │
│ │
│ • callback: Function to execute │
│ • delay: Time in milliseconds (default: 0) │
│ • args: Arguments passed to callback │
│ • Returns: Timer ID for cancellation │
│ │
│ Cancellation: │
│ ───────────── │
│ clearTimeout(timerId) │
│ │
│ Examples: │
│ ───────── │
│ // Basic usage │
│ setTimeout(() => console.log('Hello'), 1000); │
│ │
│ // With arguments │
│ setTimeout((name) => console.log(`Hi ${name}`), 1000, 'John'); │
│ │
│ // Cancel before execution │
│ const id = setTimeout(() => console.log('Never'), 5000); │
│ clearTimeout(id); │
│ │
└──────────────────────────────────────────────────────────────────┘
setInterval
┌──────────────────────────────────────────────────────────────────┐
│ setInterval │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Syntax: │
│ ─────── │
│ const intervalId = setInterval(callback, interval, ...args) │
│ │
│ Cancellation: │
│ ───────────── │
│ clearInterval(intervalId) │
│ │
│ Example: │
│ ───────── │
│ let count = 0; │
│ const id = setInterval(() => { │
│ count++; │
│ console.log(`Count: ${count}`); │
│ if (count >= 5) clearInterval(id); │
│ }, 1000); │
│ │
│ ⚠️ Warning: Interval drift │
│ ──────────────────────── │
│ If callback takes longer than interval, │
│ calls can stack up or be delayed. │
│ │
└──────────────────────────────────────────────────────────────────┘
setTimeout with 0 Delay
┌──────────────────────────────────────────────────────────────────┐
│ Zero Delay setTimeout │
├──────────────────────────────────────────────────────────────────┤
│ │
│ setTimeout(fn, 0) doesn't run immediately! │
│ │
│ console.log('1'); │
│ setTimeout(() => console.log('2'), 0); │
│ console.log('3'); │
│ │
│ Output: 1, 3, 2 │
│ │
│ Why? Event Loop: │
│ ───────────────── │
│ 1. Synchronous code runs first (Call Stack) │
│ 2. setTimeout callback goes to Task Queue │
│ 3. Event Loop picks up callback after stack is empty │
│ │
│ Minimum delay is ~4ms in browsers (after 5 nested calls) │
│ │
│ Use Cases: │
│ ────────── │
│ • Break up long-running tasks │
│ • Allow DOM updates to render │
│ • Defer execution to end of event loop tick │
│ │
└──────────────────────────────────────────────────────────────────┘
requestAnimationFrame
┌──────────────────────────────────────────────────────────────────┐
│ requestAnimationFrame │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Syntax: │
│ ─────── │
│ const frameId = requestAnimationFrame(callback) │
│ cancelAnimationFrame(frameId) │
│ │
│ Callback receives: DOMHighResTimeStamp (ms since page load) │
│ │
│ Why use it? │
│ ──────────── │
│ ✓ Synced with display refresh rate (usually 60fps) │
│ ✓ Paused in background tabs (saves battery/CPU) │
│ ✓ Optimized by browser for smooth animations │
│ ✓ More accurate than setInterval for animations │
│ │
│ Animation Loop Pattern: │
│ ─────────────────────── │
│ function animate(timestamp) { │
│ // Update animation state │
│ element.style.left = `${x}px`; │
│ │
│ // Continue animation │
│ requestAnimationFrame(animate); │
│ } │
│ requestAnimationFrame(animate); │
│ │
└──────────────────────────────────────────────────────────────────┘
requestIdleCallback
┌──────────────────────────────────────────────────────────────────┐
│ requestIdleCallback │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Execute code when browser is idle (not critical work) │
│ │
│ Syntax: │
│ ─────── │
│ requestIdleCallback(callback, { timeout: 2000 }) │
│ cancelIdleCallback(id) │
│ │
│ Callback receives IdleDeadline object: │
│ ───────────────────────────────────── │
│ deadline.didTimeout → true if timeout was reached │
│ deadline.timeRemaining() → ms left in idle period │
│ │
│ Example: │
│ ───────── │
│ requestIdleCallback((deadline) => { │
│ while (deadline.timeRemaining() > 0 && tasks.length) { │
│ const task = tasks.shift(); │
│ processTask(task); │
│ } │
│ │
│ if (tasks.length > 0) { │
│ requestIdleCallback(processTasks); │
│ } │
│ }, { timeout: 1000 }); │
│ │
│ ⚠️ Not supported in Safari - use polyfill or fallback │
│ │
└──────────────────────────────────────────────────────────────────┘
Debounce
┌──────────────────────────────────────────────────────────────────┐
│ Debounce │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Wait for pause in events before executing │
│ │
│ Events: ─x─x─x─x─x─────────────x─x─x───────── │
│ |←─ wait ─→| |← wait→| │
│ Calls: ─────────────fn()───────────fn() │
│ │
│ Use Cases: │
│ ────────── │
│ • Search input (wait for user to stop typing) │
│ • Window resize handling │
│ • Button click protection │
│ │
│ Implementation: │
│ ─────────────── │
│ function debounce(fn, delay) { │
│ let timeoutId; │
│ return function(...args) { │
│ clearTimeout(timeoutId); │
│ timeoutId = setTimeout(() => fn.apply(this, args), │
│ delay); │
│ }; │
│ } │
│ │
│ Usage: │
│ ────── │
│ const debouncedSearch = debounce(search, 300); │
│ input.addEventListener('input', debouncedSearch); │
│ │
└──────────────────────────────────────────────────────────────────┘
Throttle
┌──────────────────────────────────────────────────────────────────┐
│ Throttle │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Execute at most once per time period │
│ │
│ Events: ─x─x─x─x─x─x─x─x─x─x─x─x─x─ │
│ |←─ limit ─→|←─ limit ─→| │
│ Calls: fn()────────fn()────────fn() │
│ │
│ Use Cases: │
│ ────────── │
│ • Scroll event handling │
│ • Mouse move tracking │
│ • API rate limiting │
│ • Game input handling │
│ │
│ Implementation: │
│ ─────────────── │
│ function throttle(fn, limit) { │
│ let waiting = false; │
│ return function(...args) { │
│ if (waiting) return; │
│ fn.apply(this, args); │
│ waiting = true; │
│ setTimeout(() => waiting = false, limit); │
│ }; │
│ } │
│ │
│ Usage: │
│ ────── │
│ const throttledScroll = throttle(handleScroll, 100); │
│ window.addEventListener('scroll', throttledScroll); │
│ │
└──────────────────────────────────────────────────────────────────┘
Debounce vs Throttle
┌──────────────────────────────────────────────────────────────────┐
│ Debounce vs Throttle │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Debounce Throttle │
│ ───────────────────────────────────────────────────────── │
│ When After pause At regular intervals │
│ Guarantee 1 call after events Max 1 call per period │
│ Delay From last event From first event │
│ │
│ Example Timeline (300ms): │
│ ────────────────────────── │
│ Events: 100 200 300 400 500 ─────── 1000 │
│ Debounce: ─────────────────────────── 800 (calls once) │
│ Throttle: 100 ──── 400 ──── 700 ──── 1000 (calls 4x) │
│ │
│ Choose Debounce: │
│ ──────────────── │
│ • Final value matters (search, resize) │
│ • Want to wait for "settling" │
│ • Reducing API calls │
│ │
│ Choose Throttle: │
│ ──────────────── │
│ • Regular updates needed (scroll position) │
│ • Real-time feedback (game input) │
│ • Rate limiting │
│ │
└──────────────────────────────────────────────────────────────────┘
Timer Accuracy
┌──────────────────────────────────────────────────────────────────┐
│ Timer Accuracy │
├──────────────────────────────────────────────────────────────────┤
│ │
│ Timers are NOT guaranteed to be precise! │
│ │
│ Factors affecting accuracy: │
│ ─────────────────────────── │
│ • Minimum delay (~4ms in browsers) │
│ • Browser throttling in background tabs │
│ • System load and available resources │
│ • Other JavaScript execution blocking │
│ • Event loop congestion │
│ │
│ Background Tab Throttling: │
│ ────────────────────────── │
│ • setTimeout/setInterval: Limited to 1 call/second │
│ • requestAnimationFrame: Paused completely │
│ • requestIdleCallback: May not run │
│ │
│ For precise timing: │
│ ─────────────────── │
│ • Use performance.now() for measurements │
│ • Web Workers for background processing │
│ • Web Audio API for audio timing │
│ │
└──────────────────────────────────────────────────────────────────┘
Async Sleep / Delay
// Promise-based delay
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
// Usage with async/await
async function example() {
console.log('Start');
await delay(2000);
console.log('After 2 seconds');
}
// Cancellable delay
function cancellableDelay(ms) {
let timeoutId;
const promise = new Promise((resolve, reject) => {
timeoutId = setTimeout(resolve, ms);
});
return {
promise,
cancel: () => clearTimeout(timeoutId),
};
}
Common Patterns
Polling
async function poll(fn, interval, maxAttempts = Infinity) {
let attempts = 0;
while (attempts < maxAttempts) {
const result = await fn();
if (result) return result;
attempts++;
await delay(interval);
}
throw new Error('Polling timeout');
}
// Usage
await poll(
async () => {
const status = await checkStatus();
return status === 'complete' ? status : null;
},
1000,
30
);
Retry with Backoff
async function retryWithBackoff(fn, maxRetries = 3, baseDelay = 1000) {
for (let i = 0; i < maxRetries; i++) {
try {
return await fn();
} catch (error) {
if (i === maxRetries - 1) throw error;
await delay(baseDelay * Math.pow(2, i));
}
}
}
Best Practices
┌──────────────────────────────────────────────────────────────────┐
│ Best Practices │
├──────────────────────────────────────────────────────────────────┤
│ │
│ 1. Always store timer IDs │
│ const id = setTimeout(...); │
│ // Later: clearTimeout(id); │
│ │
│ 2. Clean up on component unmount │
│ useEffect(() => { │
│ const id = setInterval(...); │
│ return () => clearInterval(id); │
│ }, []); │
│ │
│ 3. Use requestAnimationFrame for visual updates │
│ // Not: setInterval(() => moveElement(), 16); │
│ // Use: requestAnimationFrame(animate); │
│ │
│ 4. Debounce/throttle event handlers │
│ window.addEventListener('resize', debounce(handle, 250)); │
│ │
│ 5. Use requestIdleCallback for non-critical work │
│ requestIdleCallback(() => trackAnalytics()); │
│ │
│ 6. Consider Web Workers for heavy computation │
│ // Timers in workers aren't throttled │
│ │
│ 7. Use performance.now() for accurate timing │
│ const start = performance.now(); │
│ // ... work ... │
│ const elapsed = performance.now() - start; │
│ │
└──────────────────────────────────────────────────────────────────┘
Browser Compatibility
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| setTimeout | 1+ | 1+ | 1+ | 12+ |
| setInterval | 1+ | 1+ | 1+ | 12+ |
| requestAnimationFrame | 24+ | 23+ | 6.1+ | 12+ |
| requestIdleCallback | 47+ | 55+ | ❌ | 79+ |
| performance.now() | 24+ | 15+ | 8+ | 12+ |
Key Takeaways
- •setTimeout - One-time delayed execution
- •setInterval - Repeated execution at intervals
- •requestAnimationFrame - Smooth animations synced with display
- •requestIdleCallback - Non-critical background tasks
- •Debounce - Wait for pause before executing
- •Throttle - Limit execution frequency
- •Clean up timers - Always cancel when no longer needed
- •Timers aren't precise - Account for delays and throttling