Debounce và Throttle: khác nhau thế nào?

Debounce là gì?

Debounce trì hoãn việc thực thi cho đến khi người dùng dừng tương tác trong một khoảng thời gian nhất định. Ví dụ: user gõ tìm kiếm – chỉ khi dừng gõ 300ms mới gọi API. Điều này cắt giảm số lần request, tránh spam server.

Throttle là gì?

Throttle đảm bảo một hàm chỉ chạy tối đa mỗi k mili-giây một lần, bất kể sự kiện bắn bao nhiêu. Ví dụ: khi cuộn trang, ta chỉ cập nhật vị trí/ gửi analytics mỗi 100ms, giúp UI mượt và CPU “dễ thở”.

Khi nào dùng Debounce, khi nào dùng Throttle?

• Debounce: tìm kiếm theo chữ gõ, auto-save khi dừng gõ, validate form theo “ngừng nhập”.
• Throttle: xử lý khi cuộn/resize, drag & drop, theo dõi vị trí con trỏ, analytics theo thời gian.

Demo trực tiếp

Code Demo: Triển khai Debounce & Throttle bằng JS thuần

Dưới đây là hai hàm cơ bản để triển khai debounce và throttle. Chúng ta sẽ dùng lại chính chúng trong phần demo phía trên.

Debounce

// Hàm debounce: chỉ chạy sau khi người dùng ngừng gọi một khoảng thời gian
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// Ví dụ: input search
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', debounce((e) => {
  console.log('API call with:', e.target.value);
}, 400));

Ở ví dụ trên, khi người dùng gõ liên tục, hàm chỉ chạy sau khi dừng gõ ≥400ms. Nhờ đó tránh spam API.

Throttle

// Hàm throttle: đảm bảo fn chỉ chạy tối đa mỗi "interval" ms
function throttle(fn, interval) {
  let last = 0;
  return function(...args) {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// Ví dụ: xử lý scroll
window.addEventListener('scroll', throttle(() => {
  console.log('Scroll position:', window.scrollY);
}, 200));

Với throttle, khi cuộn nhanh, log chỉ xuất hiện 5 lần/giây (200ms/lần), giúp CPU nhẹ và UI mượt.

So sánh ngắn gọn

• Debounce: delay sau khi sự kiện dừng → hợp cho search, autosave.
• Throttle: giới hạn tốc độ gọi → hợp cho scroll, resize, drag.

Kết luận

Debounce phù hợp khi bạn muốn “đợi người dùng dừng tay rồi mới xử lý”, còn Throttle phù hợp khi “giới hạn tốc độ xử lý theo định kỳ”. Dùng đúng kỹ thuật sẽ giảm số lần render, số request, và cải thiện trải nghiệm người dùng rõ rệt.