如何在前一个函数调用完全执行后调用 javascript 或 jquery 函数？

Question

我有一个简单的jquery loop。在这个循环中，我打电话给jquery function。但这里发生的是functions 被称为paralally。当previous function 仍然调用running 时，循环再次调用same function。因此，只有最后一次function 调用才会输出properly。一旦先前的function 调用被执行completely，我如何调用jquery 或javascript 函数？

这是我的循环

$("select.project_dp").each(function(index) {
  populate_tasks($(this));
}); 

这里是函数定义。

 function populate_tasks(project_dp) {
   alert("asdfsdfasdfa");
   project_id = project_dp.val();

   next_td = project_dp.parent().next( "div" ).find("select");
   customer_div = project_dp.parent().next( "div" ).next( "div" ).find(".customer_hidden");
   start_time = project_dp.parent().next( "div" ).next( "div" ).next( "div" ).find(".start_time");
   end_time = project_dp.parent().next( "div" ).next( "div" ).next( "div" ).next( "div" ).find(".end_time");
   hrs_dp = project_dp.parent().next( "div" ).next( "div" ).find(".hrs_dp");
   mins_dp = project_dp.parent().next( "div" ).next( "div" ).find(".mins_dp");

    next_td.empty();
    $.ajax({
      type: "GET",
      url: '/log_times/populate_tasks',
      dataType: "JSON",
      data: {proj_id: project_id },
      success:function(data) {
    console.log(data);  
    next_td.empty();
    customer_div.val(data.cust_id) 

    jQuery.each(data.tasks,function(i, v) {
         next_td.append($('<option value="'+ data.tasks[i]["id"] +'">'+data.tasks[i]["name"] +'</option>'));


       });



       if (data.project.hrs_calc_criteria == "By Duration") {
          hrs_dp.prop('disabled', false);
          mins_dp.prop('disabled', false);
          start_time.prop('disabled', true);
          end_time.prop('disabled', true);
       } else if (data.project.hrs_calc_criteria == "By Start & End Time") { 
          hrs_dp.prop('disabled', true);
          mins_dp.prop('disabled', true);
          start_time.prop('disabled', false);
          end_time.prop('disabled', false);
       } 

      }
    });

      }

Answer 1

传递一个回调函数：

function myCallback() {
    alert("Complete!");
}

$("select.project_dp").each(function(index) {
  populate_tasks($(this), myCallback);
}); 

然后你只需要在你的populate_tasks()函数结束时调用callbackFunction。

callbackFunction();

您需要您的populate_tasks() 函数来接受新参数：

 function populate_tasks(project_dp, callbackFunction) {
   alert("asdfsdfasdfa");
   project_id = project_dp.val();

   next_td = project_dp.parent().next( "div" ).find("select");
   customer_div = project_dp.parent().next( "div" ).next( "div" ).find(".customer_hidden");
   start_time = project_dp.parent().next( "div" ).next( "div" ).next( "div" ).find(".start_time");
   end_time = project_dp.parent().next( "div" ).next( "div" ).next( "div" ).next( "div" ).find(".end_time");
   hrs_dp = project_dp.parent().next( "div" ).next( "div" ).find(".hrs_dp");
   mins_dp = project_dp.parent().next( "div" ).next( "div" ).find(".mins_dp");
next_td.empty();
$.ajax({
  type: "GET",
  url: '/log_times/populate_tasks',
  dataType: "JSON",
  data: {proj_id: project_id },
  success:function(data) {
console.log(data);  
next_td.empty();
customer_div.val(data.cust_id) 

jQuery.each(data.tasks,function(i, v) {
     next_td.append($('<option value="'+ data.tasks[i]["id"] +'">'+data.tasks[i]["name"] +'</option>'));


   });



   if (data.project.hrs_calc_criteria == "By Duration") {
      hrs_dp.prop('disabled', false);
      mins_dp.prop('disabled', false);
      start_time.prop('disabled', true);
      end_time.prop('disabled', true);
   } else if (data.project.hrs_calc_criteria == "By Start & End Time") { 
      hrs_dp.prop('disabled', true);
      mins_dp.prop('disabled', true);
      start_time.prop('disabled', false);
      end_time.prop('disabled', false);
   } 

//  Call your callback function when this function completes
//
callbackFunction();
}

});

}

你必须调用 populate_tasks() 并传递一个指向要执行的回调函数的参数，所以如果我们有一个名为 myCallback 的函数，你想在 populate_tasks() 结束时运行它：

populate_tasks($(this), myCallback);

callback_function 实际上只是一个指向您传递的任何函数的指针，在本例中为 myCallback

至于应该在回调函数中的代码......这取决于你，我不知道当populate_tasks()函数完成时你打算做什么。

Answer 2

我很确定您可以使用队列或承诺来解决您的问题。 另一种方法可以是类似于以下的递归函数：

 var i = 0;
 var tasks = [];
 $("select.project_dp").each(function(index) {
  tasks.push($(this));
}); 

 populate_tasks(tasks[i]);

 function populate_tasks(project_dp) {
 if(i <= tasks.length){
   alert("asdfsdfasdfa");
   project_id = project_dp.val();

   next_td = project_dp.parent().next( "div" ).find("select");
   customer_div = project_dp.parent().next( "div" ).next( "div" ).find(".customer_hidden");
   start_time = project_dp.parent().next( "div" ).next( "div" ).next( "div" ).find(".start_time");
   end_time = project_dp.parent().next( "div" ).next( "div" ).next( "div" ).next( "div" ).find(".end_time");
   hrs_dp = project_dp.parent().next( "div" ).next( "div" ).find(".hrs_dp");
   mins_dp = project_dp.parent().next( "div" ).next( "div" ).find(".mins_dp");

    next_td.empty();
    $.ajax({
      type: "GET",
      url: '/log_times/populate_tasks',
      dataType: "JSON",
      data: {proj_id: project_id },
      success:function(data) {
    console.log(data);  
    next_td.empty();
    customer_div.val(data.cust_id) 

    jQuery.each(data.tasks,function(i, v) {
         next_td.append($('<option value="'+ data.tasks[i]["id"] +'">'+data.tasks[i]["name"] +'</option>'));


       });



       if (data.project.hrs_calc_criteria == "By Duration") {
          hrs_dp.prop('disabled', false);
          mins_dp.prop('disabled', false);
          start_time.prop('disabled', true);
          end_time.prop('disabled', true);
       } else if (data.project.hrs_calc_criteria == "By Start & End Time") { 
          hrs_dp.prop('disabled', true);
          mins_dp.prop('disabled', true);
          start_time.prop('disabled', false);
          end_time.prop('disabled', false);
       } 
                i ++;
        populate_tasks(tasks[i]);
      }
    });
}
      }

基本上，您首先在第一个元素上运行该函数，一旦完成，您就在第二个元素上执行您的函数 ecc... 直到任务结束。