Debounce và Throttle trong JavaScript: Lợi ích của nó và khi nào nên dùng?

Debounce và Throttle là gì?

Khi người dùng tương tác với trang web – như gõ tìm kiếm, cuộn chuột, thay đổi kích thước trình duyệt – những hành động này có thể xảy ra liên tục và với tần suất rất cao. Nếu mỗi lần tương tác đó đều khiến JavaScript xử lý ngay lập tức, ứng dụng sẽ bị chậm, giật lag, thậm chí treo trình duyệt.

Đó là lý do tại sao chúng ta cần đến debounce và throttle – hai kỹ thuật đơn giản nhưng cực kỳ hữu ích để kiểm soát tần suất gọi hàm, giúp nâng cao hiệu suất và trải nghiệm người dùng.

1. Debounce là gì?

Debounce là một cơ chế giúp trì hoãn việc thực thi một hàm cho đến khi người dùng dừng tương tác trong một khoảng thời gian nhất định.

Nói cách khác, nếu người dùng cứ tiếp tục tương tác (ví dụ: tiếp tục gõ ký tự vào ô tìm kiếm), hàm sẽ không được gọi. Chỉ khi họ dừng lại (ví dụ: dừng gõ trong 300ms), hàm mới được thực thi.

Ví dụ thực tế:

Bạn đang làm tính năng tìm kiếm realtime. Mỗi khi người dùng gõ, bạn gọi API để lấy kết quả. Nếu họ gõ liên tục 10 ký tự, bạn không muốn gọi API 10 lần – mà chỉ gọi khi họ gõ xong. Debounce giúp bạn làm điều đó.

function debounce(fn, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

const handleSearch = debounce((query) => {
  console.log("Gọi API với:", query);
}, 300);

input.addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

2. Throttle là gì?

Throttle hoạt động ngược lại một chút. Thay vì chờ người dùng dừng lại, throttle giới hạn tần suất thực thi: cứ mỗi khoảng thời gian cố định, hàm chỉ được gọi một lần, bất kể người dùng tương tác bao nhiêu.

Ví dụ thực tế:

Bạn muốn cập nhật vị trí cuộn trang khi người dùng scroll. Scroll có thể xảy ra hàng chục lần mỗi giây. Nếu mỗi lần đều xử lý logic nặng, trình duyệt sẽ chậm thấy rõ. Throttle giúp bạn chỉ gọi hàm xử lý scroll mỗi 200ms chẳng hạn.

function throttle(fn, interval) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn(...args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log("Scroll vị trí:", window.scrollY);
}, 200);

window.addEventListener("scroll", handleScroll);

3. Khi nào dùng Debounce và Throttle?

4. So sánh nhanh giữa Debounce và Throttle

Dưới đây là phần bổ sung về cách sử dụng Lodash với debounce và throttle:

5. Dùng Lodash để Cải Thiện Debounce và Throttle

Lodash cung cấp sẵn các hàm debounce và throttle, giúp bạn dễ dàng sử dụng mà không cần phải tự cài đặt lại các giải thuật.

Cách sử dụng Lodash với Debounce

Lodash cung cấp một hàm debounce rất dễ sử dụng, cho phép bạn chỉ cần truyền vào hàm cần gọi và thời gian trì hoãn. Ví dụ:

import { debounce } from "lodash";

const handleSearch = debounce((query) => {
  console.log("Calling API with:", query);
}, 300);

input.addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

Cách sử dụng Lodash với Throttle

Tương tự như debounce, Lodash cũng cung cấp một hàm throttle để giới hạn tần suất thực thi hàm:

import { throttle } from "lodash";

const handleScroll = throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 200);

window.addEventListener("scroll", handleScroll);

Sử dụng Lodash giúp bạn tiết kiệm thời gian và tránh lỗi trong quá trình cài đặt lại các hàm debounce và throttle. Hơn nữa, Lodash còn hỗ trợ thêm nhiều tính năng tiện ích như kiểm tra kiểu dữ liệu, làm việc với mảng và đối tượng, giúp mã nguồn của bạn gọn gàng và dễ duy trì hơn.

6. Kết luận

Cả debounce và throttle đều là những kỹ thuật cực kỳ hữu ích để tối ưu hiệu suất trong các ứng dụng web hiện đại. Biết cách sử dụng đúng lúc, đúng chỗ không chỉ giúp code của bạn chạy mượt hơn mà còn nâng cao trải nghiệm người dùng một cách rõ rệt.

Xem thêm các bài viết tại: vunguyenit.site