时间戳

首页 > 解决方案 > 在每个 ajax 调用上使用循环索引

javascript - 在每个 ajax 调用上使用循环索引

问题描述

我一直在尝试遍历文件名数组（这些文件应该都在我服务器上的同一目录中），然后，如果文件存在，则生成一些带有下载链接的 html 元素。

我还根据数组索引创建了一个包含我需要的信息的对象。

由于调用是异步的，所以在我的成功函数运行的那一刻，for 循环就结束了，我总是在函数内部得到相同的索引，所以我创建了几个具有相同下载链接的元素。

代码：

for(var j = 0; j < attachments.length; j++) {

    var re = /(?:\.([^.]+))?$/;

    dataObj = {
       path: "store//$vendorSettingsDTO.vendorId/assets/pdfs/"+attachments[j].propvalue,
       filename: attachments[j].propvalue.replace(/\.[^/.]+$/, ""),
       extension: re.exec(attachments[j].propvalue)[1]
    }

    jQuery.get('store//$vendorSettingsDTO.vendorId/assets/pdfs/' + attachments[j].propvalue, dataObj)
       .done(function() { 
           var div = document.createElement("div");
           div.classList.add("infoDownload")
           var a = document.createElement("a");
           a.href = dataObj.path;
           var img = document.createElement("img");
           img.src = "store//$vendorSettingsDTO.vendorId/assets/themes/$vendorSettingsDTO.skinname/images/adobe-pdf-icon-vector.png";
           img.width = 70;
           a.appendChild(img);
           a.setAttribute("download",dataObj.filename)
           div.appendChild(a)
           document.getElementById("downloads-wrapper").appendChild(div);         
        }).fail(function() { 
                    console.log("Fail")
    })
}

我怎样才能让它异步并为我的dataObj拥有正确的索引？

标签： javascriptajaxasynchronous

解决方案

最简单的选择是使用立即调用函数表达式，基本上将循环体包装在一个以索引作为参数的函数中，这样索引就可以在主体内“固定”，例如

for(var j = 0; j < attachments.length; j++) {
    (function (j) {
        // put work here
    })(j);
}

你甚至可以直接传入数据对象，这样你就不必再弄乱索引了：

for(var j = 0; j < attachments.length; j++) {

    var re = /(?:\.([^.]+))?$/;

    (function (dataObj) {
        // work body
    })({
       path: "store//$vendorSettingsDTO.vendorId/assets/pdfs/"+attachments[j].propvalue,
       filename: attachments[j].propvalue.replace(/\.[^/.]+$/, ""),
       extension: re.exec(attachments[j].propvalue)[1]
    });
}

或者，您可以使用更多功能组合，以便将数据对象和 promise 配对，然后将这些配对转换为配对上的 promise，最后将 promise 数组收集到数组的 promise 中（使用 $.when）。

推荐阅读