如何迭代地對 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 }));
    }
  });
});</code>

此方法可確保依序處理複製要求，防止伺服器負載過大而產生任何潛在問題。

以上是如何迭代地對 AJAX 請求進行排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！