我有這個 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);
});
});
});
});
uj5u.com熱心網友回復：
您的所有$.get請求都被并行呼叫。這會導致無法維持順序的競爭條件。將其視為先到先得。
為了保持順序，將每個請求包裝在 a 中Promise，并將所有這些 Promise 收集到一個陣列中。將陣列傳遞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);
});
});
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/456340.html
標籤：javascript php jQuery 阿贾克斯
上一篇：來自回圈資料的Ajax呼叫跳過