Thế giới JS, Debouncing trong JavaScript là một phương pháp được sử dụng để cải thiện hiệu suất của trình duyệt. Có thể có một số chức năng trong một trang web yêu cầu tính toán tốn thời gian. Nếu một phương thức như vậy được gọi thường xuyên, nó có thể ảnh hưởng lớn đến hiệu suất của trình duyệt, vì JavaScript là một ngôn ngữ luồng đơn. Debouncing là một phương pháp lập trình được sử dụng để đảm bảo rằng các tác vụ tốn thời gian không kích hoạt thường xuyên đến mức làm chậm hiệu suất của trang web. Nói cách khác, nó giới hạn tốc độ mà một hàm được gọi.
var button = document.getElementById("debounce");
const debounce = (func, delay) => {
let debounceTimer
return function() {
const context = this
const args = arguments
clearTimeout(debounceTimer)
debounceTimer
= 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 3 seconds!!")
}, 3000));
Đầu ra: Hộp cảnh báo sau 3 giây
Hello No matter how many times you click the debounce button, I get executed once every 3 seconds!!
1.Giải trình:
Nút này được đính kèm với trình xử lý sự kiện gọi hàm debounce. Hàm debounce được cung cấp 2 tham số – một hàm và một Số.
Đã khai báo một biến debounceTimer, như tên gợi ý, được sử dụng để thực sự gọi hàm, nhận được dưới dạng tham số sau một khoảng ‘độ trễ’ mili giây.
Nếu nút debounce chỉ được nhấp một lần, hàm debounce sẽ được gọi sau thời gian trễ. Tuy nhiên, nếu nút Debouncing được bấm một lần và được bấm lại trước khi kết thúc thời gian trễ, thì độ trễ ban đầu sẽ bị xóa và bộ đếm thời gian trễ mới được bắt đầu. Chức năng clearTimeout đang được sử dụng để đạt được điều đó.
Ý tưởng chung cho việc gỡ lỗi là:
1. Bắt đầu với thời gian chờ là 0
2. Nếu hàm debounce được gọi lại, hãy đặt lại bộ hẹn giờ về độ trễ đã chỉ định
3. Trong trường hợp hết thời gian chờ, hãy gọi hàm debounce
Do đó, mọi lệnh gọi đến hàm debounce sẽ được đặt lại hẹn giờ và trì hoãn cuộc gọi.
2.Ứng dụng:
debounce có thể được áp dụng trong việc triển khai văn bản gợi ý, trong đó chúng tôi đợi người dùng ngừng nhập trong vài giây trước khi đề xuất văn bản. do đó, trên mỗi lần nhấn phím, chúng tôi đợi vài giây trước khi đưa ra gợi ý.
Một ứng dụng khác của việc debounce là trong các trang web tải nội dung như Facebook và Twitter, nơi người dùng tiếp tục cuộn. Trong những trường hợp này, nếu sự kiện cuộn được kích hoạt quá thường xuyên thì có thể ảnh hưởng đến hiệu suất vì sự kiện này chứa nhiều video và hình ảnh. Do đó, sự kiện cuộn phải sử dụng tính năng debounce.
Trên đây là tất cả những gì về Debouncing trong javascript mà bạn cần biết. Nếu bạn có bất kỳ câu hỏi liên quan tới Debouncing, hãy chủ động liên hệ và inbox cho chúng tôi, để giúp đỡ bạn sớm nhất
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
