Gõ 5 phím, server chỉ nhận 1 request: debounce 300ms hoạt động thế nào?

Không debounce vs. có debounce

	Không debounce	Debounce 300ms
Gõ “redis”	5 request: r, re, red, redi, redis	1 request: redis
Ngập ngừng 220ms sau “red”	Vẫn bắn request	Chưa đủ 300ms → bị huỷ khi gõ “i”
Tải server	Xử lý cả truy vấn dở dang	Chỉ xử lý truy vấn cuối

Cài đặt tối giản

function debounce(fn, ms = 300) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
}
input.addEventListener('input', debounce(e => search(e.target.value)));

Áp dụng thế nào?

Dùng debounce cho: ô tìm kiếm, autosave, validate khi gõ, sự kiện resize.
Dùng throttle thay vì debounce khi cần cập nhật đều đặn trong lúc người dùng còn thao tác (scroll, kéo thả).
Kết hợp huỷ request cũ bằng AbortController để response về muộn không ghi đè kết quả mới.