ما الفرق بين debounce و throttle؟

Question

Accepted Answer

كلاهما يحد من عدد مرات تنفيذ دالة استجابةً لأحداث متكررة وسريعة — لكن باستراتيجيات توقيت مختلفة.

- **Debounce**: قم بتنفيذ الدالة فقط **بعد توقف النشاط** لمدة N ms. يعيد تعيين المؤقت في كل استدعاء. → "انتظر حتى ينتهوا."
- **Throttle**: قم بتنفيذ الدالة **بحد أقصى مرة واحدة كل N ms** أثناء النشاط المستمر. → "قم بالتشغيل بمعدل ثابت."

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## تنفيذ Debounce

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## تنفيذ Throttle

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## متى تستخدم أيهما

- **Debounce**: البحث أثناء الكتابة، الحفظ التلقائي، إعادة تحجيم النهاية، التحقق بعد توقف المستخدم عن الكتابة — تريد **القيمة النهائية**.
- **Throttle**: معالجات التمرير، mousemove، السحب، تحديد المعدل — تريد **تحديثات دورية** أثناء استمرار الإجراء.

## لماذا يكون مهماً

كلاهما يمنع تنفيذ عمل مكلف (استدعاءات API، إعادة حساب التخطيط) مئات المرات في الثانية، وهذه تقنية أداء أمامية رئيسية.