Tránh spam server khi dùng keyup, keydown

Chắc hẳn khi bạn làm một thẻ input nhập nội dung để tìm kiếm và không cần nút bấm để submit, vậy thì việc submit sẽ là tự động sau khi nhập bất kỳ ký tự nào vào thẻ input. Khi này thì sẽ dùng sự kiện thích hợp nhất sẽ là keyup hoặc keydown của jQuery, mọi thứ đều diễn ra bình thường và gần như kết quả sẽ trả về ngay lập tức cho bạn. Nhưng có một vấn đề ở đây là bạn có chắc sau khi nhập các ký tự thì chỉ có duy nhất 1 request gửi đến server? Không! mỗi khi bạn nhập 1 bất kỳ thì sẽ là 1 lần gửi request đến server, việc này thật sự rất nghiêm trọng!

Sau đây là đoạn code mình dùng timeout của Javascript để xử lý chỉ gửi duy nhất 1 lần request đến server nhập xong từ khóa tìm kiếm.

Mã Javascript:

<script type="text/javascript">
    var timeout = null;
    $('#keyword').on('keyup keydown keypress', function(e) {
        // xóa sự kiện timeout lưu trước đó
        clearTimeout(timeout);
  
        timeout = setTimeout(function() {
            alert('Xử lý gửi dữ liệu lên server ở đây');
        }, 1000);
    });
</script>