Ajax 요청 시퀀싱

많은 웹 애플리케이션에서 컬렉션을 반복하고 각 요소에 대해 Ajax 요청을 발행해야 하는 경우가 일반적입니다. 브라우저 정지를 방지하기 위해 비동기 요청을 활용하고 싶은 유혹이 있지만 이러한 요청을 효과적으로 관리하면 서버 과부하 및 기타 잠재적인 문제를 방지할 수 있습니다.

jQuery 1.5

jQuery 버전 1.5 이상의 경우 $. ajaxQueue() 플러그인은 간단한 솔루션을 제공합니다. 이 플러그인은 $.Deferred, .queue() 및 $.ajax() 함수를 활용하여 Ajax 요청을 조정하고 요청 완료 시 해결되는 약속을 반환합니다.

jQuery 1.4

jQuery의 경우 1.4 사용자의 경우, 대체 접근 방식은 빈 개체에 애니메이션 대기열을 사용하여 "대기열"을 만드는 것입니다. 이 기술을 사용하면 Ajax 요청이 제어된 방식으로 실행되고 대기열이 아직 실행 중이 아닌 경우 첫 번째 요청이 자동으로 시작됩니다.

사용 예

다음 코드 조각은 Ajax 구현 방법을 보여줍니다. $.ajaxQueue() 플러그인을 사용하여 대기열에 넣기. 요소 목록을 반복하고 Ajax 요청을 통해 각 항목을 대상 목록에 복사합니다.

$("#items li").each(function(idx) {
  $.ajaxQueue({
    url: '/echo/html/',
    data: { html: "["   idx   "] "   $(this).html() },
    type: 'POST',
    success: function(data) {
      $("#output").append($("