Javascript jqueryajax：动态div元素的随机顺序

我有一个需要在页面上呈现的图像列表。该映像来自第三方API。我得到列表并使用for循环显示图像

var count = imageIds.length;
for (var i = 0; i < count; i++) {
GetImage(imageIds[i]);
}

function GetImage(imageId){
//Ajax request here. Returns string "data" for image.
//Once the request finishes, I update the div's content like:
_targetDiv.append('<img class="thumb" src="data:image/jpeg;base64,' + data + '"/>';
}

var count=imageIds.length；
对于（变量i=0；i

问题是图像没有按顺序渲染。上面的代码根据完成的请求按任意顺序排列图像。我需要渲染图像1，然后是图像2，然后是图像3，依此类推

---

修复方法是什么？

创建一个请求承诺数组，并使用它以与原始数据相同的顺序处理响应数据

var-imageIds=[1,2,3,4,5]；
var promiseArray=imageIds.map（getImage）；
$.when.apply（null，promiseArray）.then（function（）{
//为每个请求接收的数据数组，顺序与原始数据数组相同
var数组=[].slice.call（参数）；
array.forEach（函数（项）{
$（'body'）.append（'Item#'+Item.id+'
'））
})
}).fail（函数（）{
//一个或多个请求失败…处理错误
});
函数getImage（imageId）{
var url='1〕https://simple-express-cors-endpoint-be970g7kgnc3.runkit.sh';
//归还请求和承诺
返回$.post（url，{id:imageId}）.then（函数（数据）{
log（'Request for#'+imageId+'completed'）；
//使用响应数据进行解析
返回数据；
});
}

---

有两个选项可以保留请求和响应的顺序

加载所有图像后，最终渲染所有图像

var count = imageIds.length;
var responses = [];
var completedCount = 0;

for (var i = 0; i < count; i++) {
    GetImage(imageIds[i], i);
}

function GetImage(imageId, requestIndex){
    // Ajax query goes here
    // Push the response and the requestIndex into our responses Array
    responses.push({ index: requestIndex, data: data });
    completedCount = completedCount + 1;
    // Render the images only after all responses have been obtained
    if(completedCount === count) {
        renderAllImages();
    }
}

function renderAllImages() {
    // Sort responses based on the request Index so that we preserve ordering
    responses.sort(function(a, b) {
        var keyA = a.requestIndex,
        var keyB = b.requestIndex;
        // Compare the 2 dates
        if(keyA < keyB) return -1;
        if(keyA > keyB) return 1;
        return 0;
    });

    // Render all images finally after sorted
    for(var i=0; i<responses.length; i++) {
        _targetDiv.append('<img class="thumb" src="data:image/jpeg;base64,' + responses[i].data + '"/>';

    }
}

var count=imageIds.length；
var响应=[]；
var completedCount=0；
对于（变量i=0；ikeyB）返回1；
返回0；
});
//排序后最终渲染所有图像
对于（var i=0；i键b）返回1；
返回0；
});
//排序后最终渲染所有图像
对于（var i=0；我需要显示更多关于Ajax的代码上下文检查我编辑的答案
var count = imageIds.length;
var responses = [];
var completedCount = 0;

for (var i = 0; i < count; i++) {
    GetImage(imageIds[i], i);
}

function GetImage(imageId, requestIndex){
    // Ajax query goes here
    // Push the response and the requestIndex into our responses Array
    responses.push({ index: requestIndex, data: data });
    completedCount = completedCount + 1;
    // Render all the images we have loaded so far after each response
    renderAllImages();
}

function renderAllImages() {
    // Sort responses based on the request Index so that we preserve ordering
    responses.sort(function(a, b) {
        var keyA = a.requestIndex,
        var keyB = b.requestIndex;
        // Compare the 2 dates
        if(keyA < keyB) return -1;
        if(keyA > keyB) return 1;
        return 0;
    });

    // Render all images finally after sorted
    for(var i=0; i<responses.length; i++) {
        _targetDiv.append('<img class="thumb" src="data:image/jpeg;base64,' + responses[i].data + '"/>';

    }
}