While looping a jquery ajax call

Question

I want to control the number of ajax calls to a controller using a while loop.

var counter = 0;
$('#filter-form').submit(function (event) {
    event.preventDefault();

    alert("counter init = " + counter)
    while (counter < 10) {
        (function () {
            $.ajax({
                url: '/algorithm',
                method: 'GET',
                data: $('#filter-form').serialize() + "&counter=" + counter,
                success: function (data) {
                    alert("The data is " + data);
                    setCounter(parseInt(data))
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        })();
    }
    alert("counter end = " + counter)
});

function setCounter(data) {
    counter = data
}

Controller:

@RequestMapping(value = "/algorithm")
@ResponseBody
public String test(@RequestParam Map<String, String> allRequestParam) {

    int counter = Integer.parseInt(allRequestParam.get("counter"));
    counter++;

    return Integer.toString(counter);
}

The controller basically just increments the counter and returns it and in the ajax success: it will set the global counter to that number.

When I do this, the page just freezes and I cannot click anything. I put the ajax call in a function for scoping but it still does not work. When I use a for loop, it seems the ajax does not invoke because I do not get any success or error alerts.

Answer 1

while will block synchronously until its condition is reached. Even if responses come back, the response will be asynchronous; the current thread (the while loop) will keep blocking forever.

Don't block. I don't see any reason to use a loop in the first place - instead, simply test to see if the counter is greater than the allowed number, and if it is, return:

$('#filter-form').submit(function (event) {
  event.preventDefault();
  alert("counter init = " + counter)
  if (counter >= 10) return;

If you wanted to make multiple requests in parallel on form submit, you could do that, but you would have to keep track of the counter client-side:

var counter = 0;
$('#filter-form').submit(function (event) {
  event.preventDefault();
  alert("counter init = " + counter)
  while (counter < 10) {
    counter++;
    // ... make request

Answer 2

It doesn't work for a simple reason: the $.ajax call is asynchronous.

Take this example:

$(function() {
  var t = 1;
  console.log("Hey, the ajax will start! t's value: " + t);
  $.ajax({
      url: 'www.google.com.br',
      method: 'GET',
      success: function (data) {
          t++;
          console.log("We've received an answer! t's (incremented) value: " + t);
      },
      error: function (xhr, status, error) {
          t++;
          console.log("We've received an error! t's (incremented) value: " + t);
      }
  });
  console.log("Hey, the ajax just ended.... Not really. t's value: " + t);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The output is:

Hey, the ajax will start! t's value: 1
Hey, the ajax just ended.... Not really. t's value: 1
We've received an error! t's (incremented) value: 2

That's because the $.ajax call is nonblocking, thus is doesn't block the program until it is finished, allowing the program to keep on executing the next line of code and continue running the ajax task in the background.

It is a recurrent issue in SO, so instead of providing solutions again here I'll ask you to read more on the questions:

• How do I return the response from an asynchronous call?
• How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?
• What does Asynchronous means in Ajax?

Answer 3

As others have said your problem is that the call is asynchronous. This simple example may give you some idea about how to control the flow. It should be simple enough to apply it to your case.

I am simulating what you need to make your code work. For the errors, I am passing back null but you should bubble up any errors that may occur and either halt execution or deal with them some other way.

var count = 0; // used to store your count

// This represents the function you are 
// waiting on with your ajax calls
function waitOne(num, callback) {
    setTimeout(() => {
        callback(null, num);
    }, 1000);    
}

// This represents your ajax call 
function callWaitOne(callback) {
    waitOne(count, (err, num) => {
        // Your result is here
        console.log(num); 
        // Callback to let the control function
        // know the ajax has returned
        callback(null);    
    });    
}

// This will control the calls
function printWaitOne() {    
    callWaitOne((err) => {
        if (count < 10) {
            count++;
            // Only calls if its callback 
            // has been called.
            printWaitOne();
        }
    });
}

printWaitOne();