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（我建议您在实施之前访问这些网址以了解有关Promise的更多信息。想法是让请求并行运行，然后等待所有结束并进行回调。

我会将你的JS重写为：

int size = maxStackSize; 
maxStackSize *= 2;  
Type *temp = new Type[maxStackSize]; // create temp and double the size of list
for(int i = 0; i < size; i++){ // copy over all the values
    temp[i] = list[i];
} 
delete [] list;       // delete the list 
list = temp;          // point to the resized list
list[topStack] = word;
topStackk++;

更新：如果您更喜欢使用jQuery函数，那么您可以使用$ .when（）

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");

        })
    }

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

javascript - 在for循环后执行函数

2 个答案: