Javascript ajax loop execution

Question

I have 2 questions:

1- How do I set a delay when an ajax post is executing many times ?

2 -How to run some_multi_ajax_function() when the variable exe_counter reaches 0 ?

here is my code:

for (i = 0; i < some_data_list.length; i++) {
    exe_counter=1;

    data = some_data_list[i];
    // Many ajax posts will be executed here. In the end exe_counter will be set to 0;
    some_multi_ajax_function(data);
}

function some_multi_ajax_function(data){
    $.ajax({
            ...
      }.done(function(d) {
           // here it could be used another ajax function 
           exe_counter = 0;
      });
}

UPDATE

I am sorry, I have bad explained. I want execute

data = some_data_list[1]; // second iteration. after that and others
some_big_function(data); // this can't start if exe_counter != 0

when exe_counter==0 its mean that some_multi_ajax_function() is completely done.

score 0 · Answer 1 · edited May 23 '17 at 10:26

Here you have the answer to the first question:

Execute script after specific delay using JavaScript

Now for the 2nd question, there are several problems with your code:

To call the same function when it reaches 0 would create an infinite loop.
exe_counter isn't changed at the end. It will be changed when the first ajax return in the example you gave.
You should set exe_counter outside the loop, and assing to it the value of some_data_list.length
then in some_multi_ajax_function you do exe_counter--;
then you test for 0 and call the function which you want to call on finalization but this function can't be some_multi_ajax_function()

so it goes like this:

exe_counter = some_data_list.length;
for (i = 0; i < some_data_list.length; i++) {

    data = some_data_list[i];
    // Many ajax posts will be executed here. In the end exe_counter will be set to 0;
    some_multi_ajax_function(data);
}

function end_function() {
      // whatever
}

function some_multi_ajax_function(data){
    $.ajax({
            ...
      }.done(function(d) {
           // here it could be used another ajax function 
           exe_counter--;
           if (exe_counter == 0) end_function();
      });
}

This is untested code just to explain the concepts. Also try not to use global variables (the ones without var clause). They make your code messy and hard to maintain.

score 0 · Answer 2 · answered Feb 05 '15 at 13:17

You question isn't very clear but it sounds like you want to use when to manage the ajax requests rather than have them all nested. You can pass an array of ajax promises into when by using the apply method.

// this function returns a promise
function some_multi_ajax_function(data){
  return $.ajax({
    // ...
  });
}

function getPromises() {
  for (var i = 0; i < some_data_list.length; i++) {
    var promises = [];
    exe_counter = 1;
    var data = some_data_list[i];

    // push all promises into an array
    promises.push(some_multi_ajax_function(data);
  }
  return promises;
}

var exe_counter = 0;

// use $.when to call all the promises and once they're
// completed set exe_counter to 0, or whatever you need to do
$.when.apply(null, getPromises()).then(function () {
  exe_counter = 0;
});

Javascript ajax loop execution

2 Answers2