Debounce Trong JavaScript: "Cái Phanh" Chống Đột Tử Cho Hệ Thống Của Bạn

Chào anh em! Trong sự nghiệp gõ code, chắc hẳn ai cũng từng làm cái chức năng "Ô tìm kiếm thông minh" (Auto-complete). Khách hàng cứ gõ một chữ, hệ thống lại lập tức sổ ra danh sách gợi ý.

Nhưng đằng sau sự mượt mà đó là một cuộc chiến. Nếu người dùng gõ từ "kem chống nắng" (14 ký tự), mà trình duyệt cũng ngây thơ bắn đủ 14 cái request lên server mỗi khi nhấc ngón tay khỏi bàn phím, thì hệ thống Backend của bạn sớm muộn cũng "tắt thở" vì quá tải.

Để cứu rỗi sinh mạng của các server, chúng ta có một kỹ thuật tối ưu hóa kinh điển: Debounce.

1. Debounce là gì? (Ví dụ siêu thực tế)

Về mặt lý thuyết, debounce là một kỹ thuật giới hạn tần suất thực thi của một hàm. Nó sẽ trì hoãn việc chạy hàm gốc cho đến khi người dùng thực sự ngừng thao tác trong một khoảng thời gian nhất định (ví dụ: 300 mili-giây).

Hãy tưởng tượng nó giống hệt cái cửa thang máy! Thang máy được cài đặt sẽ tự động đóng cửa sau 3 giây. Tuy nhiên, nếu ở giây thứ 2 lại có một người mới bước vào, bộ đếm thời gian sẽ bị "reset" lại từ đầu. Cửa sẽ chỉ thực sự đóng lại khi hoàn toàn KHÔNG CÓ AI bước vào thêm trong suốt 3 giây đó.

Cơ chế của Debounce hoạt động y chang như vậy.

2. Giải phẫu đoạn code 6 dòng thần thánh

Dưới đây là một hàm debounce thuần (Vanilla JS) kinh điển nhất mà bạn có thể bê vào mọi dự án:

function debounce(fn, wait) {
    var t;
    return function () {
        var ctx = this, args = arguments;
        clearTimeout(t);
        t = setTimeout(function () { fn.apply(ctx, args); }, wait);
    };
}

Ngắn gọn vậy thôi, nhưng bên trong nó chứa đựng những khái niệm "sát thủ" của JavaScript:

• var t;: Tạo một biến t để giữ bộ đếm thời gian (timer). Nhờ sức mạnh của cơ chế Closure, biến t này không bị chết đi sau khi hàm tạo chạy xong, mà sẽ được "nhốt" lại và dùng chung cho tất cả các lần gõ phím tiếp theo.
• return function () { ... }: Nó không chạy ngay lập tức, mà trả về một hàm ẩn danh mới. Đây mới chính là thứ sẽ được gắn vào sự kiện (ví dụ như onkeyup của ô input).
• var ctx = this, args = arguments;: Vì hàm chạy ngầm trong setTimeout có thể bị mất bối cảnh, ta phải lưu lại ngữ cảnh (this) và toàn bộ tham số truyền vào (arguments) ở thời điểm hiện tại để lát sau truyền lại thật chính xác cho hàm gốc fn
• clearTimeout(t);: Đây là "linh hồn" của đoạn code! Nếu hàm tiếp tục bị kích hoạt khi chưa hết thời gian chờ (người dùng vẫn đang gõ liên tục), bộ đếm thời gian cũ sẽ lập tức bị hủy diệt. Giống như việc có người thò chân vào thang máy, lệnh đóng cửa bị hủy ngang.
• t = setTimeout(..., wait);: Đặt lại một bộ đếm thời gian mới tinh. Hàm gốc fn sẽ chỉ thực sự được bóp cò (thông qua lệnh fn.apply(ctx, args)) khi khoảng thời gian wait kết thúc trong im lặng mà không bị cái clearTimeout ở trên phá đám thêm lần nào nữa.

3. Khi nào thì dùng Debounce?

Trong thực chiến, bạn sẽ thấy Debounce cứu rỗi hệ thống ở những "điểm nóng" sau:

• Ô tìm kiếm (Search Auto-complete): Thay vì gửi request vô tội vạ, hệ thống sẽ kiên nhẫn chờ người dùng ngừng gõ khoảng 300ms - 500ms rồi mới gửi đúng 1 request xịn sò lên máy chủ.
• Sự kiện Cuộn (Scroll) hoặc Kéo giãn màn hình (Resize): Các sự kiện này bắn ra hàng chục lần mỗi giây khi thao tác. Dùng debounce giúp trình duyệt không phải chạy các lệnh tính toán phức tạp liên tục, tránh hiện tượng giật lag màn hình.
• Nút "Submit" chống click đúp: Ngăn chặn những user thiếu kiên nhẫn bấm lưu liên tục gây ra rác dữ liệu trên Database.

Lời kết

Chỉ với vài dòng code, debounce đã thể hiện sự tinh tế của người kỹ sư trong việc cân bằng giữa trải nghiệm người dùng và sức chịu đựng của hệ thống phần cứng. Hiểu rõ bản chất cái cửa thang máy này, source code của bạn sẽ trưởng thành và an toàn hơn rất nhiều. Chúc anh em code sạch, server khỏe!