2011-11-09 4 views
4

검색 입력 상자의 keyup 이벤트에서 ajax 요청을 수행하는 스크립트가 있습니다. Firefox에서 (콘솔을보고 있습니다.) 보내지는 모든 요청이 완료되었음을 알았습니다. 그래서 몇 차례의 아약스 요청이 있습니다.jQuery Keyup Ajax 요청 : 이전 요청 취소

keyup 이벤트가 진행될 때 진행중인 AJAX 요청을 삭제할 수 있습니까?

jQuery를이 :

jQuery(function() { 
    var request; 
    request = function(url, keyword) { 
    return $.post('/backpack/' + url + '/search?keyword=' + keyword, function(data) { 
     var el; 
     el = "#result_" + url; 
     return $(el).html(data); 
    }); 
    }; 
    $("#search_text").bind("keyup", function() { 
    var query, url, _i, _len, _ref; 
    query = $(this).val(); 
    if (query.length > 2) { 
     _ref = ['tracks', 'albums', 'artists']; 
     for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
     url = _ref[_i]; 
     request(url, query); 
     } 
     return $("#search_suggestions").show(); 
    } else { 
     return $("#search_suggestions").hide(); 
    } 
    }); 
    return $("#suggestion_all_results").bind("click", function() { 
    return $('#search_form form').submit(); 
    }); 
}); 
+2

기존 Ajax 요청을 없애는 방법을 모르지만 모든 키 입력 ('트랙', '앨범'및 '아티스트'각각에 대해 하나씩)에 대해 세 가지 요청을하는 이유는 무엇입니까? 단일 JSON 문자열 (또는 필요한 경우 HTML의 단일 블록) 내에서 별도의 속성으로 세 가지 유형의 데이터를 반환하는 단일 요청으로이를 결합하는 것이 더 쉽지 않을까요? 또한 모든 키 입력시 왜 요청합니까? 사용자는 초당 5 자 이상을 쉽게 입력 할 수 있으므로 각 키 스트로크에서 짧은 시간 제한을 설정하는 것이 좋을 수 있으므로 요청을 초당 하나 또는 그 이상으로 제한 할 수 있습니다. – nnnnnn

+0

대단히 필요한 평가 질문에 감사드립니다. 필자는 no-memory-leak kinda 스크립트를 더 잘 수용 할 수 있도록 스크립트를 다시 작성하고 있습니다. 스크립트는 이미 JS 조각을 인수하기 전에 작성되었습니다. – dennismonsewicz

답변

4

이 이미 ultimate-uber-authoritative thread here에 답하고있다.

짧은 답변 : 그것은 XHR 객체를 반환하고의 keyup 이벤트를 전송하는 경우, 당신은 또한 지연을 추가하는 방법에 대한 생각 abort()

당신이 호출 할 수 있습니다; 그것은 서버에 꽤 큰 부하가 될 것이므로, 이벤트를 시작하기 전에 스트로크 사이에 몇 초간 기다리십시오.

Erv Walter는 위 스레드의 의견에서 다음과 같이 말합니다. "서버가 이미 요청을 수신 한 경우 브라우저가 더 이상 수신 대기하지 않아도 요청 처리가 서버의 플랫폼에 따라 계속 될 수 있습니다 진행중인 요청을 처리하여 웹 서버를 중단시키지 않는 확실한 방법은 없습니다. " 나는 아약스을하고 같은 문제로 실행했습니다

가 조회를 제안,

+0

의견을 주셔서 감사합니다! 나는이 애플 리케이션 내에서 JS 엄청난 금액을 다시 작성하고 이것은 브라우저를 파괴하는 짐승 중 하나입니다 ... – dennismonsewicz

0

당신은 단지 각각 새로운 하나를 추가하기 전에, 당신이 보내 요청하고의 반환 값을 저장해야합니다), 단지 savedRequest.abort() 첫째을한다.