javascript - 在for循环后执行函数

Question

我有一个功能，点击按钮会从甘特图中获取所选任务的所有 id，并运行一个 for 循环来保存我使用 AJAX 请求在表单中编辑的每个所选任务。

现在关于 AJAX 请求 success 的问题我添加了一个代码来清除并再次在甘特图中加载所有数据，但它没有按预期进行，多次加载数据并开始创建相同数据的副本在我的甘特图中，我尝试在循环之外执行 gantt.load 函数，但它仍然无法正常工作。

那么如何创建一个条件，在循环完成后重新加载甘特图？非常感谢任何帮助。

下面是我的代码：

HTML

<button type="button" class="btn btn-primary" onclick="editForm()">Edit</button>

javascript

 function editForm() {
            var selected_task = gantt.getSelectedTasks();

            for (var i = 0; i < selected_task.length; i++) {
                var task = selected_task[i];
                var data = gantt.getTask(task);
                    $.ajax({
                        type: 'PUT',
                        url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                        data: postData,
                        success: function () {
                            $('#edit_form_modal').modal('hide');
                            gantt.clearAll();
                            gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");

                        },
                        error: function (err) {
                            alert("Failed because of " + err);
                        }
                    })
            }
        }

Answer 1

将选定的任务映射到承诺列表，并在所有承诺解决后使用jQuery when 加载甘特图。

function editForm() {
  var selected_task = gantt.getSelectedTasks();

  var saveSelectedTask = selected_task.map(function(task, i) {
    var data = gantt.getTask(task);
    return $.ajax({
      type: 'PUT',
      url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
      data: postData,
    });
  });

  $.when(saveSelectedTask)
    .done(function() {
      $('#edit_form_modal').modal('hide');
      gantt.clearAll();
      gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");
    })
    .fail(function(err) {
      alert("Failed because of " + err);
    });
}

Answer 2

在这种情况下，你应该使用Promise，确切地说是Promise.all（我建议你在实现之前去这些URL了解更多关于Promise的知识。 这个想法是让请求并行运行，然后等待所有完成并进行回调。

我会将你的 JS 重写为：

function editForm() {
         var selected_task = gantt.getSelectedTasks();
          Promise.all(selected_task.map(function(task) {
            var data = gantt.getTask(task);
            return $.ajax({
                    type: 'PUT',
                    url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                    data: postData,
                })
        }).then(function(results) {
           $('#edit_form_modal').modal('hide');
           gantt.clearAll();
           gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");

        })
    }

更新：如果你更喜欢使用 jQuery 函数，那么你可以使用 $.when()

 function editForm() {
         var selected_task = gantt.getSelectedTasks();
          $.when(selected_task.map(function(task) {
            var data = gantt.getTask(task);
            return $.ajax({
                    type: 'PUT',
                    url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                    data: postData,
                })
        }).then(function(results) {
           $('#edit_form_modal').modal('hide');
           gantt.clearAll();
           gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");

        })
    }

但正如我上面所说，解决问题并不会让你变得更好，应该深入挖掘并了解函数的工作原理。