javascript -在for循环之后执行函数

Question

我有一个函数，onclick a button将从甘特图中获取所选任务的所有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");

        })
    }

但正如我上面所说的，解决问题并不会让你变得更好，应该深入研究它，学习函数是如何工作的。