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

0 0 0

Người đăng: Vũ Nguyễn

Theo Viblo Asia

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 debouncethrottle – 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?

Tình huống sử dụng Nên dùng Giải thích
Người dùng gõ ô tìm kiếm debounce Chờ người dùng gõ xong mới gọi API
Resize cửa sổ trình duyệt debounce Tránh gọi lại logic resize liên tục
Theo dõi cuộn trang throttle Cập nhật thông tin cuộn mỗi khoảng thời gian
Kéo thả hoặc di chuyển chuột throttle Giới hạn số lần xử lý vị trí chuột
Validate form khi nhập debounce Chờ người dùng nhập xong trước khi kiểm tra

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

Debounce Throttle
Cách hoạt động Chờ đến khi không còn tương tác thì mới gọi hàm Gọi hàm đều đặn sau mỗi khoảng thời gian cố định
Tần suất thực thi Một lần sau cùng Nhiều lần nhưng giới hạn tần suất
Dễ hiểu như “Chờ yên mới làm” “Làm đều đặn, không quá thường xuyên”
Trường hợp sử dụng Input, search, resize Scroll, mouse move, resize

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

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

Lodash cung cấp sẵn các hàm debouncethrottle, 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.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 542

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 456

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 168

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 155

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 119

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 262