Question

我一直试图遍历文件名数组（文件应该全部位于服务器的同一目录中），然后，如果IF文件存在，则生成带有下载链接的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拥有正确的索引？

Answer 1

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

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）。

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

1 个答案: