debounce và throttle khác nhau thế nào? Viết code mỗi loại

Khác biệt

	debounce	throttle
Hành vi	chỉ chạy sau khi im lặng N ms	chạy đều đặn, tối đa 1 lần/N ms
Use case	search-as-you-type, autosave	scroll, resize, drag
Reset timer	mỗi lần gọi	không

Code

function debounce(fn, ms) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), ms);
  };
}

function throttle(fn, ms) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= ms) {
      last = now;
      fn.apply(this, args);
    }
  };
}

Bản trên là throttle kiểu leading. Bản đầy đủ thêm trailing call (gọi lần cuối sau khoảng nghỉ) và cancel(). Với animation, requestAnimationFrame thường thay throttle cho scroll/mousemove.