JQUERY foreach 附加 PHP 脚本乱序

Question

我有这个 ajax 函数，它为数组中的每个项目加载 php 脚本，然后将其附加到 html 标记。问题是脚本乱序附加。如何保持对象的顺序？

jQuery(function($) {
  $.getJSON('apiUrl.com', function(response) {
    $.each(response.data, function(key, val) {
      $.get("phpFile.php", {
        id: val.id,
        title: val.title,
        img_url: val.images.jpg.image_url
      }, function(html) {
        $("#elementToLoadPhpFile").append(html);
      });
    });
  });
});

Answer 1

您的所有 $.get 请求都被并行调用。这会导致 race 情况，其中订单无法维护。将其视为 先到先得。

为了保持顺序，将每个请求包装在一个 Promise and collect all these promises in a single array. Pass the array to Promise.all 中以等待所有请求完成。

只要所有请求都完成，您就会得到一个数组，该数组的顺序与所有请求的顺序相同。遍历此数组以将每个请求的值附加到页面。

jQuery(function($) {
  $.getJSON('apiUrl.com', function(response) {
    const requests = response.data.map(val => new Promise((resolve, reject) => {
      $.get("phpFile.php", {
        id: val.id,
        title: val.title,
        img_url: val.images.jpg.image_url
      })
      .done(html => resolve(html))
      .fail((xhr, textStatus, errorThrown) => reject(errorThrown));
    }));

    Promise.all(requests).then(responses => {
      responses.forEach(html => {
        $("#elementToLoadPhpFile").append(html);
      });
    });
  });
});

JQUERY foreach 附加 PHP 脚本乱序

JQUERY foreach appending PHP script out of order

javascript

php

ajax

jquery