Javascript jQuery.when（）.then（）承诺不遵守内部for循环

我使用for循环遍历一个基本JSON对象。JSON看起来像：

{
  "1": {
    "project_name": "Example Project Name 1",
    "client_name": "John Doe"
  },
  "2": {
    "project_name": "Example Project Name  2",
    "client_name": "John Doe"
  },
  /// -------
}

我遇到的问题是当循环通过它时。我尝试使用.when和.then循环使用ajax调用，正如预期的那样同步进行，但所述ajax的输入始终是JSON的最后一个索引

显然，我认为这是错误的，因为def=def.then函数{直接在for循环中，它将保持它直到返回满意为止。我只是不明白为什么我错了，解决方案是什么！我如何正确地将项目与脚本的其余部分同步传递到prepareLayerproject？我知道我的逻辑有缺陷，我只是无法通过树看到森林

为了便于解释结果，这里是console.log的样子-蓝色区域是立即发生的，其余区域是def.then函数{

---

您可能希望在跟踪单个任务进度的同时使用jQuery。另外请注意，现代浏览器根本不需要jQuery，您所做的一切都已经有了简单的JS API：

const apidendpoint=`/app/ajax/calls/process_project.php`； constyourdata={……}； const dataKeys=Object.keysyourData； const progressBar=新的增量ProgressBarDataKeys.length； /** *你经常在同一个地方发帖：让我们把它变成一个函数。 */ 函数postDatadata={}{ 返回fetchapident{ 方法：`POST`， 标题：{ 内容类型：`application/json` }, 正文：JSON.stringifydata }; } /** *把{yourData，key}变成发布数据的承诺。 */ 功能键topromiseKey{ 返回新的PromiseSolve，拒绝=>{ const data=yourData[key]； postDatadata .thenresult=>{ 增量； 解决结果； } .catcherror=>{ 增量{错误：`${key}失败`}； 拒绝错误； }; }; } //而现在我们只是…经历了所有的事情 许诺 .alldataKeys.mapkeyToPromise .thenresult=>moveOnWhenDone .catcherror=>handleException；

---

您可能希望在跟踪单个任务进度的同时使用jQuery。另外请注意，现代浏览器根本不需要jQuery，您所做的一切都已经有了简单的JS API：

const apidendpoint=`/app/ajax/calls/process_project.php`； constyourdata={……}； const dataKeys=Object.keysyourData； const progressBar=新的增量ProgressBarDataKeys.length； /** *你经常在同一个地方发帖：让我们把它变成一个函数。 */ 函数postDatadata={}{ 返回fetchapident{ 方法：`POST`， 标题：{ 内容类型：`application/json` }, 正文：JSON.stringifydata }; } /** *把{yourData，key}变成发布数据的承诺。 */ 功能键topromiseKey{ 返回新的PromiseSolve，拒绝=>{ const data=yourData[key]； postDatadata .thenresult=>{ 增量； 解决结果； } .catcherror=>{ 增量{错误：`${key}失败`}； 拒绝错误； }; }; } //而现在我们只是…经历了所有的事情 许诺 .alldataKeys.mapkeyToPromise .thenresult=>moveOnWhenDone .catcherror=>handleException；

---

这里有三种方法可以做到这一点，不同级别的并行化

要逐个上载并逐个处理，请执行以下操作：

const bulkUpload=asyncarr，processResponse=identity=>{ 让艾尔进来吧{ const response=等待上传 等待进程响应响应 } } bulkUploadprojects.values，processResponse。然后。。。 要并行上传并在收到所有回复后逐个处理，请执行以下操作：

const bulkUpload=asyncarr=>wait Promise.allsettedarr.mappupload bulkUploadprojects.values.thenallResponses=>/*处理响应*/ 要并行上载并处理每个响应，请执行以下操作：

const uploadAndProcess=el=>uploadel.thenprocessResponse const bulkUpload=asyncarr=>wait Promise.allsettedarr.mapuploadAndProcess bulkUploadprojects.values 样板：

const projects={1:{project_name:P1，client_name:C1}，2:{project_name:P2，client_name:C2}，} 常量标识=x=>x cont URL='/app/ajax/calls/process_project.php' const upload=item=>fetchURL，requestoptions项目 const requestOptions=project=>{method:'POST'，headers:{'Content Type'：'application/json'}，body:json.stringify{project}

---

这里有三种方法可以做到这一点，不同级别的并行化

要逐个上载并逐个处理，请执行以下操作：

const bulkUpload=asyncarr，processResponse=identity=>{ 让艾尔进来吧{ const response=等待上传 等待进程响应响应 } } bulkUploadprojects.values，processResponse。然后。。。 要并行上传并处理一个接一个，一旦我们有了所有的响应 es:

const bulkUpload=asyncarr=>wait Promise.allsettedarr.mappupload bulkUploadprojects.values.thenallResponses=>/*处理响应*/ 要并行上载并处理每个响应，请执行以下操作：

const uploadAndProcess=el=>uploadel.thenprocessResponse const bulkUpload=asyncarr=>wait Promise.allsettedarr.mapuploadAndProcess bulkUploadprojects.values 样板：

const projects={1:{project_name:P1，client_name:C1}，2:{project_name:P2，client_name:C2}，} 常量标识=x=>x cont URL='/app/ajax/calls/process_project.php' const upload=item=>fetchURL，requestoptions项目 const requestOptions=project=>{method:'POST'，headers:{'Content Type'：'application/json'}，body:json.stringify{project}

---

也许可以原谅这个愚蠢的问题，但是为什么你不使用呢？你可以使用@Mike not silly。。我有一个进度条，我正在创建并运行它。。当我研究Promise_时，它看起来不太现实，所以我采用了这种方法。我基本上取100，除以索引数，每次迭代都会增加进度条的宽度。Promise_是否可以按照Moz上描述的方式实现这一点？请使用async-await.Sure，Promise.all简单地接受一系列承诺，并且在所有这些承诺完成之前不会自行解决。因此，您可以自由地让这些承诺中的每一个在resolve或reject上调用对进度条的更新：new PromiseSolve，reject=>{doblah.thene=>{updateProgressBartrue；resolve；}.Catch=>{updateProgressBarfalse；reject；}因此，每次承诺达成时，您都可以增加进度条，然后您以100%的速度实现承诺。所有[…].那么你的代码可能会原谅这个愚蠢的问题，但是为什么你不使用呢？你可以使用@Mike not Dully。.我有一个进度条，我正在创建并运行它。.当我查看Promise\u所有内容时，它看起来不太实际，所以我使用这种方法。我基本上取100，除以索引数和e每次迭代都会增加我的进度条的宽度。Promise_是否可能像Moz上描述的那样？使用async-await.Sure，Promise.all只接受一组承诺，在所有承诺都完成之前不会自行解决。因此，您可以让每个承诺在解决时调用进度条的更新或者拒绝：newpromiseresolve，reject=>{doblah.thene=>{updateprogressbarrue；resolve；}.catch=>{updateProgressBarfalse；reject；}所以每次承诺解决时，您都可以增加进度条，然后您100%地这样做就是承诺。所有[…]。然后你的代码在这里我不知道承诺。所有人都有这么多的灵活性。。感谢你的澄清！我们也可以使用async和Wait重写此代码，因为这些都是承诺的语法糖。我不知道承诺。所有人都有这么多的灵活性。。感谢你的澄清！我们也可以使用async和Wait重写此代码，si这些都是围绕承诺的语法糖。

function bulkUploadGo() {
    var def = $.when();

    for (var i = 1; i < Object.keys(projects_json).length + 1; i++) {
        var project = Object(projects_json)[i];

        // THIS WILL LOOP INSTANTLY -- SO I WILL SEE 1 - X INSTANTLY
        console.log(project); 

        def = def.then(function () {

             // THIS DISPLAYS SYNCHRONOUSLY, BUT IS ALWAYS SET TO THE LAST INDEX BECAUSE OF INSTANT LOOP ABOVE
            console.log(project); 

            return prepareLayer(project);
        });
    }
}

function prepareLayer(project) {
    return $.ajax({
        type: "POST",
        url: "/app/ajax/calls/process_project.php",
        dataType: 'html',
        data: {project: project}
    }).then(function (data) {
        var obj = JSON.parse(data); 
        // Do stuff
    });
}