jQuery.ajax(): loại bỏ các yêu cầu chậm

Question

Tôi đã xây dựng một cuộc tìm kiếm với phương thức jQuery.ajax(). Trên mỗi sự kiện keyup nó nhận được dữ liệu kết quả mới từ máy chủ.

Vấn đề là khi tôi nhập rất nhanh, ví dụ: "foobar" và yêu cầu GET của "fooba" yêu cầu nhiều thời gian hơn yêu cầu "foobar", kết quả của "fooba" được hiển thị.

Để xử lý điều này với thông số hết thời gian là không thể, tôi nghĩ vậy.

Có ai biết cách giải quyết vấn đề này không?

Answer 1

Chỉ định ID gia tăng, duy nhất cho mỗi yêu cầu và chỉ hiển thị chúng theo thứ tự tăng dần. Một cái gì đó như thế này:

var counter = 0, lastCounter = 0; 
function doAjax() { 
    ++counter; 
    jQuery.ajax(url, function (result) { 
    if (counter < lastCounter) 
     return; 
    lastCounter = counter; 
    processResult(result); 
    }); 
} 

Answer 2

Bạn chỉ nên bắt đầu tìm kiếm khi người dùng không nhập bất kỳ thứ gì trong một thời gian (500 mili giây). Điều này sẽ ngăn chặn sự cố bạn đang gặp phải.

Một jQuery plugin tuyệt vời mà không chỉ có nghĩa là delayedObserver:

http://code.google.com/p/jquery-utils/wiki/DelayedObserver

Answer 3

Làm cho nó vì vậy mỗi hủy bỏ cuối cùng. Điều đó có thể là quá nhiều hủy bỏ, nhưng khi gõ chậm, nó sẽ kích hoạt.

Answer 4

Điều đó có vẻ như một lượng lưu lượng truy cập dữ dội để gửi yêu cầu ajax cho mọi sự kiện KeyUp. Bạn nên đợi người dùng ngừng nhập - có lẽ là họ đã hoàn thành, ít nhất là 100 mili giây.

Những gì tôi sẽ làm điều này là:

var ajaxTimeout; 

function doAjax() { 
    //Your actual ajax request code 
} 


function keyUpHandler() { 
    if (ajaxTimeout !== undefined) 
     clearTimeout(ajaxTimeout); 

    ajaxTimeout = setTimeout(doAjax, 200); 
} 

Bạn có thể phải chơi với thời gian chờ thực tế, nhưng cách này hoạt động rất tốt và không đòi hỏi bất kỳ plugin khác.

Chỉnh sửa: Nếu bạn cần chuyển tham số, hãy tạo hàm nội dòng (đóng).

... 
var fun = function() { doAjax(params...) }; 
ajaxTimeout = setTimeout(fun, 200); 

Answer 5

Bạn sẽ muốn có một số loại của một hàng đợi ajax như:

http://plugins.jquery.com/project/ajaxqueue

hoặc http://www.protofunc.com/scripts/jquery/ajaxManager/

EDIT: Một lựa chọn khác, nghiên cứu các plug-in Autocomplete mã và thi đua đó. (có một số Tự động điền cũng như một trong giao diện người dùng jquery HOẶC chỉ triển khai Tự động điền nếu đáp ứng nhu cầu của bạn

Answer 6

Bạn có thể lưu trữ và .abort() yêu cầu cuối cùng khi bắt đầu một cái mới, như thế này:

var curSearch; 
$("#myInput").keyup(function() { 
    if(curSearch) curSearch.abort(); //cancel previous search 
    curSearch = $.ajax({ ...ajax options... }); //start a new one, save a reference 
}); 

Phương pháp $.ajax() trả về đối tượng XmlHttpRequest, vì vậy chỉ cần treo vào nó, và khi bạn bắt đầu tìm kiếm tiếp theo, hủy bỏ việc trước đó.