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

时间:2016-08-20 11:35:00

标签: javascript jquery function callback synchronous

我有一个简单的jquery loop。在这个循环中我打电话给jquery function。但是这里发生的是functions被称为paralally。当previous function呼叫仍为running时,循环再次呼叫same function。因此,仅对最后properly次呼叫输出function。上一次jquery来电执行javascript后如何调用functioncompletely功能?

这是我的循环

$("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);
       } 

      }
    });

      }

2 个答案:

答案 0 :(得分:0)

传递回调函数:

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

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

完成所有操作后,您只需在callbackFunction功能结束时致电populate_tasks()

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()并传递一个指向要执行的回调函数的paremter,所以如果我们有一个名为myCallback的函数,你希望在populate_tasks()结束时运行:

populate_tasks($(this), myCallback);

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

对于应该在回调函数中的代码......由您自己决定,我不知道在populate_tasks()函数完成时您打算做什么。

答案 1 :(得分:0)

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

 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上执行你的函数......直到任务结束。