Debounce và Throttle: So Sánh, Ví Dụ & Tối Ưu Performance JS

Ứng dụng web của bạn có bao giờ phản hồi chậm chạp khi người dùng gõ tìm kiếm liên tục hay cuộn trang không ngừng? Đây là một vấn đề hiệu năng phổ biến mà rất nhiều lập trình viên gặp phải. May mắn thay, câu trả lời nằm ở việc hiểu rõ và áp dụng đúng lúc hai kỹ thuật “anh em” là Debounce và Throttle. Trong bài viết này, WiWeb sẽ cùng bạn tìm hiểu cặn kẽ cách chúng hoạt động, sự khác biệt cốt lõi và khi nào nên dùng kỹ thuật nào để tối ưu trải nghiệm người dùng một cách hiệu quả nhất.

Debounce và Throttle là gì?

Hãy tưởng tượng bạn đang xử lý một cơn lũ các sự kiện (event) được kích hoạt bởi người dùng, như gõ phím, cuộn chuột, hay thay đổi kích thước cửa sổ. Nếu thực thi một tác vụ nặng (như gọi API) cho mọi sự kiện đơn lẻ, trình duyệt sẽ nhanh chóng bị quá tải, dẫn đến giao diện giật lag và trải nghiệm tồi tệ.

Đây chính là lúc Debounce và Throttle bước vào cuộc chơi. Chúng không phải là những khái niệm cao siêu, mà là hai chiến lược thông minh để kiểm soát tần suất thực thi một hàm. Cả hai đều giúp giảm bớt số lượng tác vụ không cần thiết, nhưng chúng làm điều đó theo hai cách hoàn toàn khác nhau.

Debounce là gì?

Debounce giống như một người bạn kiên nhẫn. Nó sẽ không thực thi một hàm cho đến khi một khoảng thời gian yên tĩnh nhất định đã trôi qua kể từ lần kích hoạt cuối cùng.

Hãy hình dung một thanh tìm kiếm “gợi ý trực tiếp”. Nếu không có Debounce, mỗi khi bạn gõ một ký tự (“t”, “o”, “i”), một yêu cầu API sẽ được gửi đi để lấy kết quả. Gõ “toi uu performance” có thể tạo ra 17 yêu cầu! Thật lãng phí.

Với Debounce, chúng ta sẽ đặt ra một quy tắc: “Chỉ gửi yêu cầu API sau khi người dùng đã ngừng gõ trong 500ms”.

• Bạn gõ ‘t’… đồng hồ đếm ngược 500ms bắt đầu.
• Trong vòng 500ms đó, bạn gõ tiếp ‘o’… đồng hồ cũ bị hủy và một đồng hồ 500ms mới được bắt đầu lại từ đầu.
• Quá trình này lặp lại. Chỉ khi bạn ngừng gõ, đồng hồ mới đếm hết 500ms, và duy nhất một yêu cầu API được gửi đi với chuỗi tìm kiếm hoàn chỉnh.

Nói cách khác, Debounce gộp một chuỗi sự kiện dày đặc thành một lần thực thi duy nhất sau khi chuỗi sự kiện kết thúc.

Throttle trong Javascript là gì?

Nếu Debounce là người bạn kiên nhẫn, thì Throttle là một người điều phối giao thông có kỷ luật. Nó đảm bảo một hàm chỉ được thực thi tối đa một lần trong một khoảng thời gian xác định, bất kể sự kiện được kích hoạt bao nhiêu lần trong khoảng thời gian đó.

Ví dụ kinh điển là sự kiện cuộn trang (scroll) để làm hiệu ứng parallax hoặc chức năng “infinite scroll”. Một cú cuộn chuột nhẹ có thể kích hoạt hàng chục, thậm chí hàng trăm sự kiện scroll.

Áp dụng Throttle, chúng ta đặt ra quy tắc: “Dù người dùng cuộn nhanh đến đâu, chỉ cập nhật vị trí hoặc tải thêm dữ liệu mỗi 200ms một lần“.

• Bạn bắt đầu cuộn, hàm được thực thi ngay lập tức.
• Đồng hồ 200ms bắt đầu đếm.
• Trong 200ms tiếp theo, dù bạn có cuộn bao nhiêu lần, hàm sẽ không được gọi lại.
• Khi 200ms kết thúc, hàm sẽ được thực thi thêm một lần nữa (nếu vẫn còn sự kiện cuộn đang chờ), và chu kỳ mới lại bắt đầu.

Throttle đảm bảo hàm được gọi một cách đều đặn, có kiểm soát, thay vì để nó chạy một cách hỗn loạn.

So sánh Debounce vs Throttle

Hiểu định nghĩa là một chuyện, nhưng nhận ra sự khác biệt tinh tế giữa chúng mới là chìa khóa để sử dụng hiệu quả. Cả hai đều trì hoãn việc thực thi, nhưng mục đích và thời điểm của sự trì hoãn đó hoàn toàn khác nhau.

Cơ chế hoạt động: Khi nào function được thực thi?

Sự khác biệt lớn nhất nằm ở câu hỏi: “Khi nào hàm của tôi sẽ chạy?”

• Với Debounce: Hàm sẽ chạy sau khi người dùng ngừng thực hiện hành động trong một khoảng thời gian chờ (delay) đã định. Nó tập trung vào kết quả cuối cùng của một chuỗi hành động.
  • Nó tự hỏi: “Bạn đã xong việc chưa? OK, tôi sẽ chạy bây giờ.”
• Với Throttle: Hàm sẽ chạy đều đặn trong suốt quá trình người dùng thực hiện hành động, nhưng với tần suất được giới hạn. Nó đảm bảo sự phản hồi liên tục nhưng không quá dồn dập.
  • Nó tuyên bố: “Cứ mỗi X mili giây, tôi sẽ chạy một lần, không hơn.”

Bảng so sánh nhanh các tiêu chí quan trọng

Để dễ dàng lựa chọn, WiWeb đã tổng hợp các điểm khác biệt chính vào bảng dưới đây:

Trực quan hóa: Biểu đồ thời gian giúp bạn dễ hình dung

Nếu vẫn còn hơi khó hình dung, hãy thử nghĩ về một dòng thời gian:

• Sự kiện gốc (Không tối ưu):
  [Sự kiện]-[Sự kiện]-[Sự kiện]-[Sự kiện]-[Sự kiện]... (Thực thi liên tục)
• Debounce (delay 100ms):
  [Sự kiện]-[Sự kiện]-[Sự kiện]...(chờ 100ms)...[THỰC THI]
• Throttle (interval 100ms):
  [Sự kiện -> THỰC THI]...[Sự kiện]...(hết 100ms)...[Sự kiện -> THỰC THI]...

Khi nào nên sử dụng Debounce và Throttle trong thực tế?

Lý thuyết là vậy, nhưng áp dụng vào dự án thực tế thì sao? Việc lựa chọn đúng kỹ thuật sẽ quyết định ứng dụng của bạn mượt mà hay ì ạch. Dưới đây là những tình huống phổ biến nhất.

Các trường hợp sử dụng Debounce phổ biến

Sử dụng Debounce khi bạn chỉ quan tâm đến kết quả cuối cùng và không muốn hành động cho đến khi người dùng đã hoàn thành một chuỗi thao tác.

1. Thanh tìm kiếm (Search Input): Như đã đề cập, đây là trường hợp kinh điển. Bạn chỉ muốn gọi API để lấy kết quả sau khi người dùng đã gõ xong cụm từ khóa, chứ không phải với mỗi ký tự họ gõ.
2. Tự động lưu (Auto-saving): Trong các trình soạn thảo văn bản hoặc form phức tạp, bạn không muốn gửi yêu cầu lưu về server mỗi lần người dùng nhấn phím. Thay vào đó, hãy debounce hành động lưu, nó sẽ chỉ kích hoạt khi người dùng ngừng nhập liệu một vài giây.
3. Xác thực dữ liệu form (Form Validation): Thay vì hiển thị thông báo lỗi (ví dụ: “Email không hợp lệ”) ngay khi người dùng mới bắt đầu gõ, hãy debounce hàm validation. Điều này cho phép người dùng gõ xong email của họ trước khi bạn kiểm tra và hiển thị phản hồi.

Các trường hợp nên áp dụng kỹ thuật Throttle

Sử dụng Throttle khi bạn muốn đảm bảo một hành động được thực hiện đều đặn theo thời gian, cung cấp phản hồi liên tục cho người dùng mà không làm quá tải trình duyệt.

1. Xử lý sự kiện cuộn trang (Infinite Scroll, Parallax): Khi người dùng cuộn, bạn cần liên tục kiểm tra xem họ đã cuộn đến cuối trang chưa để tải thêm nội dung. Throttle đảm bảo việc kiểm tra này diễn ra đều đặn (ví dụ, 250ms một lần) thay vì hàng trăm lần mỗi giây.
2. Theo dõi chuyển động chuột (Mouse Move) hoặc Kéo thả (Drag & Drop): Việc cập nhật vị trí của một element khi người dùng kéo thả cần diễn ra mượt mà. Throttle sẽ giúp cập nhật tọa độ một cách thường xuyên, tạo cảm giác real-time nhưng vẫn đảm bảo hiệu năng.
3. Thay đổi kích thước cửa sổ (Window Resize): Khi người dùng thay đổi kích thước trình duyệt, sự kiện resize có thể được bắn ra liên tục. Nếu bạn cần tính toán lại layout, việc throttle hàm tính toán sẽ ngăn chặn các phép tính lặp đi lặp lại không cần thiết.

Hướng dẫn triển khai Debounce và Throttle bằng JavaScript

Việc tự viết các hàm này từ đầu là một bài tập tuyệt vời để hiểu sâu hơn về closures và timers trong JavaScript. Hoặc bạn cũng có thể sử dụng các thư viện uy tín để tiết kiệm thời gian.

Làm thế nào để debounce một hàm trong JavaScript?

Đây là một cách triển khai hàm debounce đơn giản và hiệu quả. Nó sử dụng setTimeout để trì hoãn và clearTimeout để reset bộ đếm mỗi khi có sự kiện mới.

function debounce(func, delay) {
  let timeoutId;

  // Trả về một hàm mới
  return function(...args) {
    // Hủy bỏ timeout trước đó nếu có
    clearTimeout(timeoutId);

    // Thiết lập một timeout mới
    timeoutId = setTimeout(() => {
      // Gọi hàm gốc với các đối số đã truyền
      func.apply(this, args);
    }, delay);
  };
}

// Cách sử dụng:
const searchInput = document.getElementById('search');

const handleSearch = (event) => {
  console.log('Đang gọi API với:', event.target.value);
};

// Bọc hàm handleSearch bằng debounce với độ trễ 500ms
const debouncedSearch = debounce(handleSearch, 500);

searchInput.addEventListener('keyup', debouncedSearch);

Cách tự viết hàm Throttle trong JavaScript

Hàm throttle phức tạp hơn một chút. Logic của nó là kiểm tra xem đã đến lúc được phép chạy hay chưa.

function throttle(func, limit) {
  let inThrottle;
  let lastFunc;
  let lastRan;

  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      lastRan = Date.now();
      inThrottle = true;
    }

    clearTimeout(lastFunc);
    lastFunc = setTimeout(function() {
      if ((Date.now() - lastRan) >= limit) {
        func.apply(context, args);
        lastRan = Date.now();
      }
    }, limit - (Date.now() - lastRan));
  };
}

// Cách sử dụng:
const handleScroll = () => {
  console.log('Người dùng đang cuộn trang!');
};

const throttledScroll = throttle(handleScroll, 200);

window.addEventListener('scroll', throttledScroll);

Sử dụng Debounce/Throttle với thư viện phổ biến (Ví dụ Lodash)

Trong các dự án thực tế, để đảm bảo sự ổn định và tiết kiệm thời gian, việc sử dụng các hàm đã được kiểm chứng từ thư viện như Lodash là một lựa chọn khôn ngoan. Cú pháp của chúng rất ngắn gọn và dễ hiểu.

// Cài đặt: npm install lodash
import _ from 'lodash';

// Sử dụng Debounce với Lodash
const debouncedSave = _.debounce(saveUserData, 1000);
document.getElementById('my-form').addEventListener('input', debouncedSave);

// Sử dụng Throttle với Lodash
const throttledResize = _.throttle(calculateLayout, 250);
window.addEventListener('resize', throttledResize);

Ứng dụng nâng cao: Debounce trong React

Trong môi trường React, nơi state và re-render là trung tâm của mọi thứ, việc áp dụng Debounce đòi hỏi một cách tiếp cận hơi khác để hoạt động đúng như mong đợi. Bạn không thể chỉ đơn giản gọi hàm debounce bên trong component.

Tại sao cần Debounce trong các ứng dụng React?

Giả sử bạn có một ô input tìm kiếm trong một component React. Mỗi lần người dùng gõ, bạn cập nhật một state. Việc cập nhật state này sẽ gây ra re-render cho toàn bộ component.

Nếu bạn định nghĩa hàm debounced ngay bên trong thân component, nó sẽ bị tạo lại từ đầu sau mỗi lần re-render. Điều này phá vỡ hoàn toàn cơ chế của Debounce, vì bộ đếm thời gian (timer) của nó sẽ liên tục bị reset và không bao giờ thực sự chạy được.

Xây dựng custom hook useDebounce hiệu quả

Giải pháp hoàn hảo cho vấn đề này trong React là tạo ra một custom hook, ví dụ là useDebounce. Hook này sẽ quản lý giá trị đã được debounce một cách độc lập với vòng đời re-render của component.

Đây là một ví dụ về cách xây dựng hook useDebounce:

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  // State để lưu trữ giá trị đã debounce
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Thiết lập một timer
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cleanup function: Hủy timer nếu value thay đổi hoặc component unmount
    // Đây là phần quan trọng nhất để debounce hoạt động
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Chỉ chạy lại effect nếu value hoặc delay thay đổi

  return debouncedValue;
}

export default useDebounce;

Cách sử dụng hook trong component:

import React, { useState, useEffect } from 'react';
import useDebounce from './useDebounce'; // Import hook vừa tạo

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  // Sử dụng hook useDebounce để lấy giá trị sau khi người dùng ngừng gõ 500ms
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  // useEffect này sẽ chỉ chạy khi `debouncedSearchTerm` thay đổi
  useEffect(() => {
    if (debouncedSearchTerm) {
      // Gọi API tìm kiếm tại đây
      console.log(`Đang tìm kiếm cho: ${debouncedSearchTerm}`);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      placeholder="Tìm kiếm..."
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}

Với cách làm này, component của bạn vẫn re-render mỗi khi gõ phím để cập nhật giao diện, nhưng tác vụ nặng (gọi API) chỉ được thực thi khi debouncedSearchTerm thực sự thay đổi, giúp tối ưu hiệu năng một cách hoàn hảo.

Kết luận

Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết về Debounce và Throttle. Chúng không chỉ là những đoạn code, mà là những công cụ tư duy mạnh mẽ giúp bạn kiểm soát dòng chảy sự kiện trong ứng dụng.

Để tóm tắt một cách dễ nhớ nhất:

• Dùng Debounce khi bạn muốn đợi người dùng làm xong rồi mới hành động (như tìm kiếm, tự động lưu).
• Dùng Throttle khi bạn muốn phản hồi hành động của người dùng một cách đều đặn, có kiểm soát (như cuộn trang, kéo thả).

Nắm vững hai kỹ thuật này không chỉ giúp trang web của bạn chạy nhanh hơn mà còn thể hiện bạn là một lập trình viên JavaScript thực sự quan tâm đến trải nghiệm người dùng.

Bạn thấy phần nào trong việc triển khai Debounce và Throttle là khó khăn nhất? Hãy chia sẻ suy nghĩ của bạn với WiWeb ở phần bình luận bên dưới nhé!

Nếu việc tối ưu hóa hiệu năng website làm bạn mất quá nhiều thời gian và công sức, WiWeb luôn sẵn sàng hỗ trợ bạn xây dựng một website chuyên nghiệp, mượt mà từ A-Z. Nhắn tin cho chúng tôi ngay để được tư vấn nhé!