JavaScript - Debouncing: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của debouncing. Đừng lo lắng nếu bạn chưa từng nghe đến thuật ngữ này trước đây - đến cuối bài hướng dẫn này, bạn sẽ debouncing như một chuyên gia!

JavaScript - Debouncing

Debouncing là gì?

Hãy tưởng tượng bạn đang ở trong một thang máy đông người, và mọi người liên tục nhấn nút "đóng cửa". Sẽ rất hỗn loạn nếu cửa thang máy phản hồi mỗi lần nhấn! Thay vào đó, thang máy chờ đến khi mọi người ngừng nhấn nút trong một khoảng thời gian trước khi thực sự đóng cửa. Đó chính là điều debouncing làm trong lập trình.

Debouncing là một thực hành lập trình được sử dụng để đảm bảo rằng các nhiệm vụ tốn thời gian không được gọi quá thường xuyên, giúp chúng hiệu quả hơn. Nó giống như nói với mã của bạn, "Hey, đợi một giây và xem có bất kỳ sự kiện nào khác đến trước khi bạn hành động!"

Tại sao chúng ta cần Debouncing?

Giả sử bạn đang xây dựng một tính năng tìm kiếm cho một trang web. Bạn muốn hiển thị kết quả tìm kiếm khi người dùng gõ, nhưng bạn không muốn gửi yêu cầu đến máy chủ cho mỗi lần gõ. Điều đó sẽ không hiệu quả và có thể làm quá tải máy chủ của bạn. Đây là nơi debouncing đến để cứu giúp!

Cách thực hiện Debouncing trong JavaScript

Bây giờ, hãy gấp Sleeve của chúng ta và nhảy vào một đoạn mã! Đừng lo lắng nếu bạn không hiểu mọi thứ ngay lập tức - chúng ta sẽ phân tích từng bước.

function debounce(func, delay) {
let timeoutId;

return function(...args) {
clearTimeout(timeoutId);

timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}

Wow, có vẻ như một điều khó hiểu! Hãy phân tích nó:

Chúng ta định nghĩa một hàm叫做 debounce nhận hai tham số:

func: Hàm chúng ta muốn debounce
delay: Số milliseconds chờ trước khi gọi hàm

Bên trong debounce, chúng ta khai báo một biến叫做 timeoutId. Điều này sẽ giúp chúng ta theo dõi timeout của mình.
Chúng ta trả về một hàm mới thực hiện debouncing:

Nó xóa bất kỳ timeout nào đã tồn tại bằng clearTimeout(timeoutId).
Nó thiết lập một timeout mới bằng setTimeout().
Sau thời gian chờ, nó gọi hàm gốc với bất kỳ tham số nào được truyền vào.

Bây giờ, hãy xem cách chúng ta có thể sử dụng hàm debounce này:

const expensiveOperation = () => {
console.log("Thực hiện một thao tác tốn kém...");
};

const debouncedOperation = debounce(expensiveOperation, 1000);

// Simulate rapid calls
for (let i = 0; i < 5; i++) {
debouncedOperation();
}

Trong ví dụ này, mặc dù chúng ta gọi debouncedOperation năm lần liên tiếp, expensiveOperation sẽ chỉ chạy một lần, sau một giây chờ.

Lợi ích của Debouncing

Cải thiện Hiệu suất: Debouncing giảm số lần một hàm được gọi, có thể cải thiện hiệu suất đáng kể, đặc biệt là cho các thao tác tốn tài nguyên.
Tốt hơn cho Người dùng: Nó có thể làm cho ứng dụng của bạn cảm thấy mượt mà hơn bằng cách giảm độ trễ gây ra bởi các bản cập nhật thường xuyên.
Giảm Chi phí: Đối với các thao tác liên quan đến gọi API, debouncing có thể giảm số lượng yêu cầu, tiềm năng tiết kiệm chi phí API.

Các Trường hợp Thực tế của Debouncing

Hãy khám phá một số ứng dụng thực tế của debouncing:

1. Tr输入 Tìm kiếm

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

const fetchSearchResults = (query) => {
// Simulating an API call
console.log(`Lấy kết quả cho: ${query}`);
};

const debouncedSearch = debounce(fetchSearchResults, 300);

searchInput.addEventListener('input', (e) => {
debouncedSearch(e.target.value);
});

Trong ví dụ này, chúng ta debounce hàm tìm kiếm. Nó sẽ chỉ lấy kết quả 300ms sau khi người dùng ngừng gõ, tránh các cuộc gọi API không cần thiết.

2. Sự kiện Thay đổi Cửa sổ

const handleResize = () => {
console.log('Cửa sổ đã thay đổi kích thước!');
// Thực hiện điều chỉnh bố cục
};

const debouncedResize = debounce(handleResize, 250);

window.addEventListener('resize', debouncedResize);

Ở đây, chúng ta debounce bộ điều khiển thay đổi kích thước. Điều này ngăn không cho bộ điều khiển được gọi quá thường xuyên trong quá trình thay đổi kích thước cửa sổ, có thể gây ra vấn đề hiệu suất.

3. Sự kiện Cuộn

const handleScroll = () => {
console.log('Đã cuộn!');
// Cập nhật UI dựa trên vị trí cuộn
};

const debouncedScroll = debounce(handleScroll, 100);

window.addEventListener('scroll', debouncedScroll);

Ví dụ này debounce bộ điều khiển sự kiện cuộn, đảm bảo hiệu suất mượt mà khi cập nhật UI dựa trên vị trí cuộn.

Bảng phương thức Debouncing

Phương thức	Mô tả	Ví dụ
`setTimeout`	Thiết lập một timer để thực thi một hàm khi timer hết hạn	`setTimeout(func, delay)`
`clearTimeout`	Hủy bỏ một timeout trước đó được thiết lập bởi `setTimeout()`	`clearTimeout(timeoutId)`
`apply`	Gọi một hàm với một `this` giá trị và các tham số được cung cấp dưới dạng một mảng	`func.apply(this, args)`

Và thế là bạn đã có nó, các bạn! Bạn vừa học về phép thuật của debouncing trong JavaScript. Nhớ rằng, như học bất kỳ kỹ năng mới nào, thực hành làm nên perfect. Hãy thử implement debouncing trong các dự án của riêng bạn và xem nó có thể cải thiện hiệu suất như thế nào.

Ai ngờ rằng một điều đơn giản như "chờ một chút" lại có thể mạnh mẽ đến thế trong lập trình? Đó giống như câu nói cổ xưa, "Sự kiên nhẫn là đức tính" - và trong trường hợp của debouncing, nó cũng là một boost hiệu suất!

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, tiếp tục vui vẻ với JavaScript!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Canvas

Hướng Dẫn Tiếp Theo:

JavaScript - Hiệu suất