ความแตกต่างระหว่าง 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**: search-as-you-type, autosave, resize-end, การตรวจสอบหลังจากที่ผู้ใช้หยุดพิมพ์ — คุณต้องการค่า *สุดท้าย*
- **Throttle**: scroll handlers, mousemove, drag, rate-limiting — คุณต้องการการอัปเดต *เป็นระยะ* ขณะที่การดำเนินการกำลังดำเนินอยู่

## ทำไมถึงมีความสำคัญ

ทั้งสองป้องกันการทำงานที่มีค่าใช้จ่ายสูง (API calls, layout recalculation) หลายร้อยครั้งต่อวินาที ซึ่งเป็นเทคนิคประสิทธิภาพ front-end ที่สำคัญ

ไลบรารี่เช่น lodash จัดเตรียมเวอร์ชันที่มีประสิทธิภาพด้วยตัวเลือก leading/trailing