Trong JavaScript, chức năng gỡ lỗi đảm bảo rằng mã của bạn chỉ được kích hoạt một lần cho mỗi lần nhập của người dùng. Đề xuất hộp tìm kiếm, tự động lưu trường văn bản và loại bỏ nhấp chuột vào hai nút đều là các trường hợp sử dụng để gỡ lỗi.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo hàm gỡ lỗi trong JavaScript.
gỡ lỗi là gì?
thuật ngữ ra mắt đến từ đồ điện tử. Khi bạn đang nhấn một nút, chẳng hạn như trên điều khiển TV của bạn, tín hiệu sẽ truyền đến vi mạch của điều khiển từ xa nhanh đến mức trước khi bạn có thể nhả nút, nút này sẽ nảy lên và vi mạch ghi lại “lần nhấp” của bạn nhiều lần.
Để giảm thiểu điều này, sau khi nhận được tín hiệu từ nút, vi mạch sẽ ngừng xử lý tín hiệu từ nút trong vài micro giây trong khi bạn không thể nhấn lại về mặt vật lý.
Gỡ lỗi trong JavaScript
Trong JavaScript, trường hợp sử dụng cũng tương tự. Chúng tôi muốn kích hoạt một chức năng, nhưng chỉ một lần cho mỗi trường hợp sử dụng.
Giả sử rằng chúng tôi muốn hiển thị đề xuất cho truy vấn tìm kiếm, nhưng chỉ sau khi khách truy cập đã nhập xong truy vấn đó.
Hoặc chúng tôi muốn lưu các thay đổi trên một biểu mẫu, nhưng chỉ khi người dùng không tích cực làm việc với những thay đổi đó, vì mỗi lần “lưu” khiến chúng tôi tốn một chuyến đi cơ sở dữ liệu.
Và sở thích của tôi—một số người đã thực sự quen với Windows 95 và bây giờ hãy nhấp đúp vào mọi thứ 😁.
Đây là một triển khai đơn giản của ra mắt chức năng (CodePen tại đây):
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
function saveInput(){
console.log('Saving data');
}
const processChange = debounce(() => saveInput());
Nó có thể được sử dụng trên một đầu vào:
<input type="text" onkeyup="processChange()" />
Hoặc một nút:
<button onclick="processChange()">Click me</button>
Hoặc một sự kiện cửa sổ:
window.addEventListener("scroll", processChange);
Và trên các yếu tố khác như hàm JS đơn giản.
Vì vậy, những gì đang xảy ra ở đây? Các debounce là một chức năng đặc biệt xử lý hai tác vụ:
- Phân bổ phạm vi cho hẹn giờ Biến đổi
- Lập lịch chức năng của bạn để được kích hoạt tại một thời điểm cụ thể
Hãy giải thích cách thức hoạt động của tính năng này trong trường hợp sử dụng đầu tiên với kiểu nhập văn bản.
Khi một người khách viết chữ cái đầu tiên và nhả chìa khóa, debounce đầu tiên đặt lại bộ hẹn giờ với clearTimeout(timer). Tại thời điểm này, bước này là không cần thiết vì chưa có lịch trình nào. Sau đó, nó lên lịch cho chức năng được cung cấp—saveInput()—được gọi trong 300 ms.
Nhưng giả sử rằng khách truy cập tiếp tục viết, vì vậy mỗi lần nhả phím sẽ kích hoạt debounce lần nữa. Mỗi lệnh gọi cần đặt lại bộ đếm thời gian, hay nói cách khác, hủy các kế hoạch trước đó bằng saveInput()và lên lịch lại cho thời gian mới—300 mili giây trong tương lai. Điều này tiếp tục miễn là khách truy cập tiếp tục nhấn các phím dưới 300 mili giây.
Lịch trình cuối cùng sẽ không bị xóa, vì vậy saveInput() cuối cùng sẽ được gọi.
Ngược lại—làm thế nào để bỏ qua các sự kiện tiếp theo
Điều đó tốt cho việc kích hoạt tự động lưu hoặc hiển thị đề xuất. Nhưng còn trường hợp sử dụng với nhiều lần nhấp vào một nút thì sao? Chúng tôi không muốn đợi lần nhấp cuối cùng, mà muốn đăng ký lần đầu tiên và bỏ qua phần còn lại (CodePen tại đây).
function debounce_leading(func, timeout = 300){
let timer;
return (...args) => {
if (!timer) {
func.apply(this, args);
}
clearTimeout(timer);
timer = setTimeout(() => {
timer = undefined;
}, timeout);
};
}
Ở đây chúng tôi kích hoạt saveInput() chức năng đầu tiên debounce_leading cuộc gọi gây ra bởi lần nhấp vào nút đầu tiên. Chúng tôi lên lịch hủy hẹn giờ trong 300 ms. Mỗi lần nhấp vào nút tiếp theo trong khung thời gian đó sẽ có bộ hẹn giờ được xác định và sẽ chỉ đẩy sự hủy diệt 300 mili giây về tương lai.
Triển khai gỡ lỗi trong thư viện
Trong bài viết này, tôi đã chỉ cho bạn cách triển khai chức năng gỡ lỗi trong JavaScript và sử dụng nó để gỡ lỗi các sự kiện được kích hoạt bởi các phần tử trang web.
Tuy nhiên, bạn không cần sử dụng triển khai của riêng mình ra mắt trong các dự án của bạn nếu bạn không muốn. Các thư viện JS được sử dụng rộng rãi đã chứa phần triển khai của nó. Đây là vài ví dụ:
