Làm cách nào để kích hoạt sự kiện onkeyup bị trì hoãn cho đến khi người dùng tạm dừng việc nhập của họ?

Question

Tôi có một vùng văn bản nơi mọi người nhập một số văn bản (tự nhiên), và tôi muốn làm cho nó để một yêu cầu AJAX được thực hiện mỗi bây giờ và sau đó để có được một số gợi ý về những gì textarea là về (như stack tràn câu hỏi liên quan, nhưng cho một vùng văn bản, không phải là kiểu nhập văn bản). Vấn đề là tôi không thể thực hiện một yêu cầu AJAX ở mỗi lần nhấn phím (nó sẽ vô dụng và tốn rất nhiều tài nguyên), và tôi không chắc đó là cách hiệu quả nhất để làm điều đó (mỗi từ X? Mỗi X giây) hay cái gì khác?).

Cách tốt nhất để thực hiện việc này là gì?

Cảm ơn bạn trước.

Answer 1

Bạn có thể kết hợp bộ xử lý sự kiện keypress với setTimeout để bạn gửi yêu cầu Ajax một khoảng thời gian sau khi nhấn phím, hủy và khởi động lại bộ hẹn giờ nếu một lần nhấn khác xảy ra trước khi bộ hẹn giờ kết thúc. Giả sử bạn có một textarea với id 'myTextArea' và một chức năng Ajax callback được gọi là doAjaxStuff:

function addTextAreaCallback(textArea, callback, delay) { 
    var timer = null; 
    textArea.onkeypress = function() { 
     if (timer) { 
      window.clearTimeout(timer); 
     } 
     timer = window.setTimeout(function() { 
      timer = null; 
      callback(); 
     }, delay); 
    }; 
    textArea = null; 
} 

addTextAreaCallback(document.getElementById("myTextArea"), doAjaxStuff, 1000); 

Answer 2

Nếu bạn quan tâm đến các giải pháp jQuery, jQuery Suggest là cách triển khai tốt.

Không có ý nghĩa sáng tạo lại bánh xe mỗi lần.

Answer 3

Cá nhân tôi sẽ sử dụng setInterval để theo dõi văn bản thay đổi và chỉ thực hiện các cuộc gọi lại AJAX khi phát hiện thay đổi được thực hiện. mỗi giây sẽ nhanh và đủ chậm.

Answer 4

Một lựa chọn khác là sử dụng một plugin jQuery nhỏ gọi là bindWithDelay. Nó sử dụng cùng một kỹ thuật setTimeout mà câu trả lời được chấp nhận có, nhưng xử lý hết thời gian chờ để mã của bạn dễ đọc hơn một chút. Các source code có thể được nhìn thấy trên github.

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000) 

Answer 5

Nếu bạn đang sử dụng rất nhiều tính năng này trên các trang web và không muốn để theo dõi tất cả các refs setTimeout vv sau đó tôi đóng gói này thành một plugin có sẵn here.

Plugin thêm một vài tùy chọn vào phương thức $ .ajax bình thường để đệm và hủy cuộc gọi ajax trước đó.

Answer 6

Nếu bạn đang sử dụng underscore.js, bạn có thể sử dụng debounce function.

Ví dụ (jQuery sử dụng cho KeyUp):

$('#myTextArea').keyup(_.debounce(function(){ 
    alert('hello'); 
}, 500)); 

Answer 7

bạn đang tìm kiếm gì được gọi là debouncing. Đây là một thuật toán chung trong JavaScript mẹ đẻ:

function debounce(fn, duration) { 
    var timer; 
    return function() { 
    clearTimeout(timer); 
    timer = setTimeout(fn, duration) 
    } 
} 

và đây là một ví dụ về cách sử dụng nó với một sự kiện onkeyup:

function debounce(fn, duration) { 
 
    var timer; 
 
    return function(){ 
 
    clearTimeout(timer); 
 
    timer = setTimeout(fn, duration); 
 
    } 
 
} 
 

 
$(function(){ 
 
    
 
    $('#txtSearch').on('keyup', debounce(function(){ 
 
    
 
    alert('You paused your typing!'); 
 
    
 
    }, 500)); 
 
    
 
});

input{ 
 
    padding:.5em; 
 
    font-size:16px; 
 
    width:20em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="txtSearch" placeholder="Type here" />