كيفية تأخير الأحداث (Debounce) في JavaScript

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const searchInput = document.getElementById('search');

async function fetchResults(query) {
  if (!query.trim()) return;
  const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
  const data = await res.json();
  renderResults(data);
}

const debouncedSearch = debounce(fetchResults, 300);

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

function recalculateLayout() {
  console.log('Recalculating at:', window.innerWidth, window.innerHeight);
  // ... DOM measurements, chart redraws, grid recalculations
}

window.addEventListener('resize', debounce(recalculateLayout, 200));

function debounce(fn, delay, { leading = false } = {}) {
  let timer;
  return function (...args) {
    const callNow = leading && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!leading) fn.apply(this, args);
    }, delay);
    if (callNow) fn.apply(this, args);
  };
}

// Fires immediately on first click, ignores rapid repeat clicks
const handleSubmit = debounce(submitForm, 500, { leading: true });

class SearchWidget {
  constructor(input) {
    this.input = input;
    this.query = '';
    // Arrow function here would lose `this` inside handleInput
    this.input.addEventListener('input', debounce(this.handleInput.bind(this), 300));
  }

  handleInput(e) {
    this.query = e.target.value;
    this.fetch();
  }
}