الـ Debouncing يعني تأجيل تنفيذ الدالة حتى تمر فترة دون أحداث جديدة. نطبقه بـ setTimeout():

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

const search = debounce((text) => {
  fetch(`/api/search?q=${encodeURIComponent(text)}`);
}, 400);

input.addEventListener('input', (e) => search(e.target.value));

لماذا؟

دون debounce، كل حرف يكتبه المستخدم يرسل طلبًا للخادم. معه، يُرسل طلب واحد بعد أن يتوقف عن الكتابة.

Debounce أم Throttle؟

• Debounce: ينفّذ بعد توقف الأحداث.
• Throttle: ينفّذ مرة كل فترة على الأكثر أثناء استمرار الأحداث، مثل التمرير.