AJAX 요청을 반복적으로 순서 지정하는 방법

AJAX 요청 순서 지정

다양한 시나리오에서 개발자는 컬렉션을 반복하여 각 요소에 대해 AJAX 요청을 시작해야 하는 상황에 직면할 수 있습니다. 목표는 다음 요소로 진행하기 전에 각 요청을 완료하여 동시 요청 및 잠재적인 문제로 인해 서버가 과부하되는 것을 방지하는 것입니다. 또한 동기식 AJAX 호출을 사용하지 않으면 브라우저의 응답성이 유지됩니다.

컬렉션을 통한 반복을 위한 디자인 패턴

일반적인 솔루션에는 콜백이 성공할 때마다 진행되는 반복자 컨텍스트를 만드는 것이 포함되지만, 많은 사람들이 보다 효율적인 접근 방식을 추구합니다. 다음은 몇 가지 효과적인 디자인 패턴입니다.

jQuery 1.5

jQuery 1.5 버전의 솔루션은 $.Deferred, $.queue() 및 $.ajax() 메서드를 활용합니다. 또한 요청 완료 시 해결되는 약속을 제공합니다.

<code class="javascript">$.ajaxQueue = function(ajaxOpts) {
  var jqXHR, dfd = $.Deferred(), promise = dfd.promise();

  ajaxQueue.queue(doRequest);

  promise.abort = function(statusText) {
    if (jqXHR) {
      return jqXHR.abort(statusText);
    }
    var queue = ajaxQueue.queue(), index = $.inArray(doRequest, queue);
    if (index > -1) {
      queue.splice(index, 1);
    }
    dfd.rejectWith(ajaxOpts.context || ajaxOpts,
      [promise, statusText, ""]);
    return promise;
  };

  function doRequest(next) {
    jqXHR = $.ajax(ajaxOpts)
      .done(dfd.resolve)
      .fail(dfd.reject)
      .then(next, next);
  }

  return promise;
};</code>

jQuery 1.4

이전 버전의 jQuery(구체적으로 1.4)의 경우 빈 객체의 애니메이션 대기열을 활용하면 다음을 수행할 수 있습니다. AJAX 요청에 대한 사용자 정의 "대기열"을 생성합니다.

<code class="javascript">(function($) {
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {
      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);
        next();
      };

      $.ajax(ajaxOpts);
    });
  };
})(jQuery);</code>

사용 예

다음 HTML 구조를 고려하세요.

<code class="html"><ul id="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul id="output"></ul></code>

$.ajaxQueue() 플러그인 사용 , #items에 있는 항목의 HTML을 #output으로 복사할 수 있습니다.

<code class="javascript">$("#items li").each(function(idx) {
  $.ajaxQueue({
    url: '/echo/html/',
    data: {html : "["+idx+"] "+$(this).html()},
    type: 'POST',
    success: function(data) {
      $("#output").append($("<li>", { html: data }));
    }
  });
});</li></code>

이 접근 방식을 사용하면 복사 요청이 순차적으로 처리되어 과도한 서버 로드로 인해 발생하는 잠재적인 문제를 방지할 수 있습니다.

위 내용은 AJAX 요청을 반복적으로 순서 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!