Debounce và throttle khác nhau thế nào? Khi nào dùng cái nào?

Cả hai giới hạn tần suất chạy một hàm bị kích hoạt liên tục, nhưng theo cách khác nhau:

• Debounce: gom nhiều lần gọi thành một — chỉ chạy sau khi ngừng kích hoạt một khoảng wait. Mỗi lần gọi mới sẽ reset đồng hồ.
• Dùng cho: ô search gõ phím (chờ người dùng ngừng gõ), validate form, auto-save, xử lý resize khi hoàn tất.
• Throttle: chạy tối đa một lần mỗi khoảng thời gian, dù kích hoạt bao nhiêu lần.
• Dùng cho: scroll, mousemove, kéo-thả, bắn sự kiện theo nhịp đều.

Mẹo nhớ: debounce = "chờ yên rồi mới làm"; throttle = "làm đều tay theo nhịp".

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

Cả hai đều dựa trên closure giữ timer.

Nên có cancel() để dọn timer khi component unmount, tránh gọi trên state đã hủy.