Debouncing
Debouncing không có gì khác ngoài việc giảm các tính toán tốn thời gian không cần thiết để tăng hiệu suất trình duyệt. Có một số tình huống trong đó một số chức năng mất nhiều thời gian hơn để thực hiện một hoạt động nhất định. Ví dụ:lấy một ví dụ về thanh tìm kiếm trong một trang web thương mại điện tử.
Tóm tắt
Giả sử người dùng muốn nhận "Bộ tài liệu học Tutorix" . Anh ta nhập mọi ký tự của sản phẩm vào thanh tìm kiếm. Sau khi nhập mỗi ký tự, có một Api cuộc gọi diễn ra từ trình duyệt đến máy chủ để nhận được sản phẩm cần thiết. Vì muốn có "bộ nghiên cứu Tutorix", người dùng phải thực hiện 17 lệnh gọi Api từ trình duyệt đến máy chủ. Hãy nghĩ về một kịch bản khi hàng triệu người thực hiện cùng một tìm kiếm ở đó bằng cách gọi hàng tỷ Api's . Vì vậy, việc gọi hàng tỷ Api cùng một lúc chắc chắn sẽ dẫn đến hiệu suất trình duyệt chậm hơn . Để giảm nhược điểm này, Debouncing đi vào hình ảnh.
Trong trường hợp này, Debouncing sẽ đặt một khoảng thời gian, giả sử là 2 giây, giữa hai lần nhấn phím. Nếu thời gian giữa hai lần nhấn phím vượt quá 2 giây, thì chỉ cuộc gọi Api sẽ diễn ra. Trong 2 giây đó, người dùng có thể nhập ít nhất một số ký tự, giảm các ký tự Api gọi. Vì lệnh gọi Api đã giảm, hiệu suất của trình duyệt sẽ được tăng lên. Người ta phải chú ý rằng Debouncing cập nhật chức năng cho mọi hành trình phím.
Tóm tắt ví dụ
Trong ví dụ sau, một nút được đính kèm với trình nghe sự kiện điều đó gọi là sự mất đi chức năng. Debounce hàm được cung cấp với 2 tham số, một là hàm và một là số (thời gian). Bộ hẹn giờ được khai báo, như tên gợi ý gọi debounce hoạt động sau một thời gian cụ thể.
Sau khi debounce được nhấp vào nút, một hộp cảnh báo sẽ mở ra và hiển thị một thông báo. Chức năng cập nhật mọi lúc, có nghĩa là nếu nút được nhấp trước thời gian trễ (2 giây), bộ hẹn giờ ban đầu sẽ bị xóa và bộ hẹn giờ mới sẽ được bắt đầu. Để đạt được tác vụ này, hãy clearTimeOut () chức năng được sử dụng.
Ví dụ
<html>
<body>
<input type = "button" id="debounce" value = "Debounce">
<script>
var button = document.getElementById("debounce");
var debounce = (func, delay) => {
let Timer
return function() {
const context = this
const args = arguments
clearTimeout(Timer)Timer= setTimeout(() =>
func.apply(context, args), delay)
}
}
button.addEventListener('click', debounce(function() {
alert("Hello\nNo matter how many times you" +
"click the debounce button, I get " +"executed once every 2 seconds!!")}, 2000));
</script>
</body>
</html> Sau khi thực hiện chức năng trên, nút sau sẽ được hiển thị
Sau khi nhấp vào nút và đợi trong 2 giây, hộp cảnh báo sau sẽ được hiển thị dưới dạng đầu ra.
Đầu ra
