Debouncing và Throttling trong JavaScript: Hiểu rõ và ứng dụng để tối ưu hiệu năng Website

Trong quá trình phát triển web, đặc biệt là khi làm việc với các sự kiện như scroll, resize, hoặc input, việc xử lý quá nhiều lần một hàm trong một khoảng thời gian ngắn có thể dẫn đến hiệu năng kém. Đây là lúc debouncing và throttling trở nên hữu ích.

Debouncing là gì?

Debouncing là một kỹ thuật giới hạn tốc độ gọi một hàm, chỉ thực thi hàm sau khi một khoảng thời gian nhất định trôi qua mà không có thêm bất kỳ lời gọi nào khác. Hiểu đơn giản, nó 'trì hoãn' việc thực thi hàm cho đến khi người dùng 'ngừng' thực hiện một hành động nào đó trong một khoảng thời gian nhất định.

Ví dụ, trong một ô tìm kiếm, bạn có thể sử dụng debouncing để chỉ gửi yêu cầu tìm kiếm đến server sau khi người dùng đã ngừng gõ trong 500ms. Điều này giúp giảm tải cho server và cải thiện trải nghiệm người dùng.

Ví dụ Debouncing:

 function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
 }

 // Sử dụng
 const handleInputChange = (event) => {
 console.log('Gửi yêu cầu tìm kiếm:', event.target.value);
 };

 const debouncedInputChange = debounce(handleInputChange, 500);

 // Gắn vào sự kiện input
 // inputElement.addEventListener('input', debouncedInputChange);
  

Throttling là gì?

Throttling giới hạn tốc độ gọi một hàm bằng cách chỉ thực thi hàm một lần trong một khoảng thời gian nhất định. Không giống như debouncing (chờ đợi sự 'ngừng' của hành động), throttling đảm bảo hàm được gọi đều đặn, mặc dù tần suất có thể bị giảm đi.

Ví dụ, khi người dùng cuộn trang, bạn có thể sử dụng throttling để chỉ cập nhật một số thông tin trên trang (ví dụ: cập nhật vị trí thanh cuộn) mỗi 200ms. Điều này giúp tránh tình trạng trình duyệt bị 'treo' do phải xử lý quá nhiều sự kiện cuộn cùng lúc.

Ví dụ Throttling:

 function throttle(func, limit) {
 let inThrottle;
 return function(...args) {
 const context = this;
 if (!inThrottle) {
 func.apply(context, args);
 inThrottle = true;
 setTimeout(() => inThrottle = false, limit);
 }
 };
 }

 // Sử dụng
 const handleScroll = () => {
 console.log('Cập nhật thông tin thanh cuộn');
 };

 const throttledScroll = throttle(handleScroll, 200);

 // Gắn vào sự kiện scroll
 // window.addEventListener('scroll', throttledScroll);
  

Khi nào nên sử dụng Debouncing và Throttling?

• Debouncing: Sử dụng khi bạn chỉ quan tâm đến kết quả cuối cùng của một chuỗi hành động. Ví dụ: ô tìm kiếm, tự động lưu văn bản.
• Throttling: Sử dụng khi bạn muốn cập nhật thông tin một cách thường xuyên nhưng không quá thường xuyên. Ví dụ: theo dõi vị trí thanh cuộn, cập nhật dữ liệu theo thời gian thực.

Kết luận

Debouncing và throttling là những kỹ thuật mạnh mẽ giúp bạn tối ưu hóa hiệu năng website bằng cách kiểm soát tần suất gọi các hàm. Hiểu rõ sự khác biệt giữa chúng và áp dụng đúng cách sẽ giúp bạn tạo ra những trải nghiệm người dùng mượt mà và hiệu quả hơn.