Timing and Microtasks

setTimeout, setInterval, requestAnimationFrame, and microtask queue.

Overview

JavaScript timing functions control code execution timing.

Key Concepts

• setTimeout — Delay execution
• setInterval — Repeat execution
• requestAnimationFrame — Optimize animations
• Microtasks — Promise callbacks
• Event Loop — Task and microtask execution order

Code Examples

<div id="output"></div>
<button id="start">Start Timing Demo</button>

<script>
const output = document.getElementById('output');

function log(message) {
  output.innerHTML += `<div>${message}</div>`;
}

document.getElementById('start').addEventListener('click', () => {
  output.innerHTML = '';
  
  log('1. Synchronous start');
  
  setTimeout(() => log('5. setTimeout (0ms)'), 0);
  setTimeout(() => log('6. setTimeout (100ms)'), 100);
  
  Promise.resolve().then(() => log('3. Promise resolved'));
  
  requestAnimationFrame(() => log('4. requestAnimationFrame'));
  
  log('2. Synchronous end');
});

// Debounce function
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Throttle function
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Usage
const debouncedSearch = debounce((query) => {
  console.log('Searching:', query);
}, 300);

const throttledScroll = throttle(() => {
  console.log('Scroll position:', window.scrollY);
}, 100);

document.getElementById('search').addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

window.addEventListener('scroll', throttledScroll);
</script>

Practice

Implement a countdown timer using setTimeout and visual feedback.