jQuery.ajax() : 느린 요청을 버리십시오.

Question

jQuery.ajax() 메소드로 livesearch를 빌드했습니다. 모든 키 업 이벤트에서 서버로부터 새로운 결과 데이터를 수신합니다.

문제는 내가 매우 빠르게 타이핑 할 때입니다. "foobar"와 "fooba"의 GET 요청은 "foobar"요청보다 많은 시간이 필요하며 "fooba"결과가 표시됩니다.

타임 아웃 매개 변수로 이것을 처리하는 것은 불가능하다고 생각합니다.

어떻게 해결할 수 있습니까?

Answer 1

각 요청에 고유 한 증분 ID를 할당하고 증분 순서대로 표시하십시오. 다음과 같이 입력하십시오 :

Answer 2

사용자가 잠시 (500ms 정도) 아무 것도 입력하지 않은 경우에만 검색을 시작해야합니다. 이렇게하면 문제를 예방할 수 있습니다.

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

Answer 3

그것은 각각의 마지막 취소 확인 :

않는 우수한 jQuery 플러그인은 그 delayedObserver입니다. 너무 많이 취소 될 수도 있지만 입력이 느려지면 트리거됩니다.

Answer 4

모든 KeyUp 이벤트에 대해 ajax 요청을 보내려면 엄청난 양의 트래픽처럼 보입니다. 사용자는 적어도 100 밀리 초 동안 입력이 중지 될 때까지 기다려야합니다.

는 내가 뭘 할 것은 이것이다 :

var ajaxTimeout; 

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


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

    ajaxTimeout = setTimeout(doAjax, 200); 
} 

당신은 실제 타임 아웃 시간 함께 플레이 할 수 있지만,이 방법은 아주 잘 작동하고 다른 플러그인을 필요로하지 않습니다.

편집 : 매개 변수를 전달해야하는 경우 인라인 함수 (클로저)를 만듭니다. , 또 다른 옵션 자동 완성 플러그인 코드를 연구하고 그 에뮬레이션 :

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

또는 http://www.protofunc.com/scripts/jquery/ajaxManager/

편집 :

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

Answer 5

당신은 같은 아약스 큐의 어떤 종류를 원할 것입니다. (jquery UI에 하나뿐 아니라 여러 자동 완성이 있습니다. 또는 사용자 요구에 맞는 자동 완성을 구현하십시오.

Answer 6

당신은 저장하고 .abort() 이런 새로운 시작, 마지막 요청 : 그래서 그냥 그 위에 걸어,

이

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

$.ajax() 방법은 XmlHttpRequest 객체를 반환, 그리고 당신이 다음 검색을 시작할 때 중단 이전 것.