[ Better ] 10 ví dụ về Kỹ thuật debounce trong JavaScript: Làm thế nào để tối ưu hóa xử lý sự kiện
Kỹ thuật debounce giải quyết vấn đề của việc gọi một hàm xử lý liên tục khi một sự kiện xảy ra, nhưng hàm đó chỉ được thực thi sau khi người dùng dừng tương tác trong một khoảng thời gian nhất định.
Table of Contents
Một phương pháp phổ biến để thực hiện kỹ thuật debounce là sử dụng một hàm gốc, thường là hàm xử lý sự kiện, như một tham số của hàm debounce.
Hàm gốc, một hàm mới có khả năng giảm tần suất, được tạo ra bởi hàm debounce.
Dưới đây là cách thực hiện kỹ thuật debounce:
Một hàm chính được gọi là debounce(func, delay) với hai tham số: func là hàm mà bạn muốn debounce, và delay là thời gian chờ giữa các lần gọi hàm func.
Input debounce: là hàm debounce được tạo ra từ hàm debounce chính.
Một khoảng thời gian sau khi nó được gọi, nó sẽ hoàn thành chức năng.
Khi sự kiện input được kích hoạt trong ô textbox hoặc bất kỳ phần tử HTML nào khác mà bạn muốn, hàm debounce sẽ được gọi và sau đó chờ đợi một thời gian delay trước khi thực thi công việc được gán, trong trường hợp này là hiển thị giá trị nhập vào.
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
// Sử dụng debounce function để tạo một hàm debounce cho sự kiện input
const debounceInput = debounce(function(event) {
// Thực hiện công việc của bạn ở đây, ví dụ: tìm kiếm dữ liệu, gửi yêu cầu HTTP, v.v.
console.log("Input value:", event.target.value);
}, 300); // 300 milliseconds là thời gian chờ
// Gán hàm debounceInput cho sự kiện input của một ô textbox cụ thể
const inputElement = document.getElementById('yourTextInputId');
inputElement.addEventListener('input', debounceInput);
Tạo một hàm giảm tốc độ: Để bắt đầu, bạn phải tạo một hàm debounce có thể chứa hai tham số: hàm gốc mà bạn muốn debounce và một thời gian chờ—thời gian mà bạn muốn chờ trước khi thực thi hàm gốc sau khi người dùng dừng tương tác.
Kỹ thuật debounce Tạo một biến timeout cho hàm debounce: Bạn sẽ tạo một biến trong hàm debounce để lưu trữ ID của timeout.
Trả về một hàm mới trong hàm debounce: Khi sự kiện xảy ra, hàm này sẽ là hàm được gọi thực sự.
Bạn có thể đặt một timeout với thời gian chờ được chỉ định trong hàm này bằng cách sử dụng setTimeout.
Khi hàm được gọi lại trong khoảng thời gian chờ, thời gian chờ trước sẽ bị hủy và một thời gian chờ mới sẽ được thiết lập.
Thực thi hàm gốc trong hàm mới sau khi timeout kết thúc: Hàm wrapper sẽ được sử dụng để gọi hàm gốc khi không có lời gọi mới được kích hoạt.
10 ví dụ sử dụng kỹ thuật debounce
Tìm và xử lý dữ liệu: Kỹ thuật debounce input giúp tránh gửi yêu cầu tìm kiếm quá nhiều lần liên tiếp khi người dùng nhập liệu vào một ô tìm kiếm.
Kỹ thuật debounce Thay vào đó, nó chỉ gửi yêu cầu tìm kiếm sau một khoảng thời gian nhất định sau khi người dùng dừng gõ.
Thao tác gửi HTTP yêu cầu: Khi người dùng điền vào một biểu mẫu hoặc gửi các yêu cầu HTTP (ví dụ: gửi một bài viết mới), debounce input giúp tránh gửi nhiều yêu cầu không cần thiết.
Xử lý các sự kiện di chuyển và cắt giảm: Có thể sử dụng input debounce khi xử lý sự kiện scroll hoặc resize trên trình duyệt để giảm thiểu số lượng lời gọi hàm xử lý để tối ưu hóa hiệu suất trang web.
Tiếp nhận và xử lý các đơn đăng ký của người dùng: Điều này có thể được sử dụng để đảm bảo rằng hành động chỉ được thực hiện sau khi người dùng dừng nhập trong một khoảng thời gian nhất định trong các trường hợp cần xác định khi người dùng đã nhập liệu xong trước khi thực hiện một hành động cụ thể cho Kỹ thuật debounce.
1. Tìm kiếm và lọc dữ liệu trong một trang web:
const searchInput = document.getElementById('searchInput');
const searchResultContainer = document.getElementById('searchResultContainer');
const debounceSearch = debounce(function(event) {
const searchTerm = event.target.value;
// Gửi yêu cầu tìm kiếm dựa trên searchTerm và cập nhật giao diện người dùng
}, 300);
searchInput.addEventListener('input', debounceSearch);
2. Gửi yêu cầu HTTP khi người dùng thay đổi giá trị trong một biểu mẫu
const formInput = document.getElementById('formInput');
const debounceFormSubmit = debounce(function(event) {
const formData = new FormData(event.target.form);
// Gửi yêu cầu HTTP để xử lý dữ liệu biểu mẫu formData
}, 500);
formInput.addEventListener('input', debounceFormSubmit);
3. Xử lý sự kiện scroll trên trang web:
window.addEventListener('scroll', debounce(function() {
// Thực hiện các hành động liên quan đến sự kiện scroll, ví dụ: thay đổi giao diện người dùng
}, 200));
4. Xử lý sự kiện resize trên trình duyệt:
window.addEventListener('resize', debounce(function() {
// Thực hiện các hành động liên quan đến sự kiện resize, ví dụ: điều chỉnh giao diện người dùng
}, 300));
5. Lọc và kiểm tra dữ liệu đầu vào từ người dùng:
const inputElement = document.getElementById('inputElement');
const debounceInputValidation = debounce(function(event) {
const inputValue = event.target.value;
// Kiểm tra và xác nhận dữ liệu đầu vào từ người dùng
}, 400);
inputElement.addEventListener('input', debounceInputValidation);
6. Tự động lưu dữ liệu khi người dùng nhập liệu vào một trình soạn thảo văn bản:
const textEditor = document.getElementById('textEditor');
const debounceAutoSave = debounce(function(event) {
const content = event.target.value;
// Lưu nội dung trình soạn thảo văn bản sau một khoảng thời gian chờ
}, 1000);
textEditor.addEventListener('input', debounceAutoSave);
7. Xử lý sự kiện gõ phím khi người dùng đang nhập mật khẩu:
const passwordInput = document.getElementById('passwordInput');
const debouncePasswordCheck = debounce(function(event) {
const password = event.target.value;
// Kiểm tra mật khẩu và cập nhật giao diện người dùng sau một khoảng thời gian chờ
}, 500);
passwordInput.addEventListener('input', debouncePasswordCheck);
8. Tạo tính năng tìm kiếm tự động khi người dùng nhập liệu vào ô tìm kiếm:
const searchInput = document.getElementById('searchInput');
const debounceAutoSearch = debounce(function(event) {
const searchTerm = event.target.value;
// Tự động tìm kiếm và hiển thị kết quả sau một khoảng thời gian chờ
}, 300);
searchInput.addEventListener('input', debounceAutoSearch);
9. Xử lý sự kiện gõ phím khi người dùng nhập email:
const emailInput = document.getElementById('emailInput');
const debounceEmailValidation = debounce(function(event) {
const email = event.target.value;
// Kiểm tra định dạng email và cập nhật giao diện người dùng sau một khoảng thời gian chờ
}, 500);
emailInput.addEventListener('input', debounceEmailValidation);
10. Tính toán tổng hoặc kết quả khi người dùng nhập liệu vào các ô tính toán:
const numberInputs = document.querySelectorAll('.numberInput');
const debounceCalculateTotal = debounce(function() {
let total = 0;
numberInputs.forEach(input => {
total += parseFloat(input.value) || 0;
});
// Hiển thị tổng hoặc kết quả sau một khoảng thời gian chờ
console.log("Total:", total);
}, 400);
numberInputs.forEach(input => {
input.addEventListener('input', debounceCalculateTotal);
});
Hàm debounce được sử dụng trong mỗi ví dụ để giảm thiểu số lượng lời gọi hàm xử lý mà người dùng phải trải qua khi nhập liệu hoặc tương tác với trang web.
Điều này cải thiện hiệu suất và trải nghiệm người dùng.
#Mtips5s #Contact
Fanpage: https://www.facebook.com/mtipscoder
Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder
Website: https://mtips5s.com
Youtube: https://mtips5s.com
Twitter(X): @takagiks99
Instagram: @khuongkara
Threads: @khuongkara
Google Maps: @khuongkara
#Base Code #Souce Code
Npm: @tools.mtips5s.com
Bộ công cụ My Self: @github
Npm: @npm
Docker: @docker
Chúc các bạn thành công!
Leave A Comment