Как вызвать функцию JavaScript или JQuery после того, как предыдущий вызов функции выполняется полностью?

javascript jquery function callback synchronous

52 просмотра

2 ответа

у меня простой jquery loop. в этом цикле я называю jquery function. но то, что происходит здесь, это то, что functionsих называют paralally. когда previous functionвызов все еще running, цикл вызывает same functionснова. в результате чего вывод поступает properlyтолько для последнего functionвызова. Как я могу вызвать jqueryили javascriptфункцию после выполнения предыдущего functionвызова completely?

вот моя петля

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

      }
    });

      }
Автор: John Источник Размещён: 08.11.2019 11:15

Ответы (2)


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()функции.

Автор: Nunchy Размещён: 20.08.2016 11:40

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 ... до тех пор, пока задачи не завершатся.

Автор: Nicolò Cozzani Размещён: 20.08.2016 12:09
Вопросы из категории :
32x32