الـ 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: ينفّذ مرة كل فترة على الأكثر أثناء استمرار الأحداث، مثل التمرير.