Async

How to Add Delays in Async Functions

Create a promise-based sleep function

Quick Answer (2024 ES6+ Way)

javascript

const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function delayed() {
  console.log('Start');
  await sleep(2000); // Wait 2 seconds
  console.log('After 2 seconds');
}

Live Example

javascript

async function loadWithDelay() {
  console.log('Loading...');
  await sleep(1000);
  
  console.log('Still loading...');
  await sleep(1000);
  
  console.log('Done!');
}

// With timeout for fetch
async function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return response;
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('Request timeout');
    }
    throw error;
  }
}

Common Variations

Retry with Delay

javascript

async function retryWithDelay(fn, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      return await fn();
    } catch (error) {
      if (i === retries - 1) throw error;
      await sleep(delay);
    }
  }
}

Debounce Async

javascript

let timeoutId;
const debounced = async (fn, delay) => {
  clearTimeout(timeoutId);
  return new Promise(resolve => {
    timeoutId = setTimeout(() => resolve(fn()), delay);
  });
};

❌ Don't Do This (Outdated Way)

Avoid blocking code or busy waiting

javascript

// DON'T DO THIS
var start = Date.now();
while (Date.now() - start < 2000) {
  // Blocks the entire thread
}

Browser Support

✓ Works in all modern browsers (ES2015+)

#async#delay#timeout