While loop won't end when I tell it in JavaScript

Question

       var hasData = '1';
        while (hasData != 0) {
            $.ajax({
            url: '/ajax.php?updateRow='+hasData,
            dataType: 'json',
            async: false,
            success: function(data) {
                hasData = data.next;
                $('.result').append(data.html);
              }
            });

What should happen: JSON Array pulled from PHP ( [html] and [next] ). If [next] is set to 0 (when there are no more entries) - the while loop stops and that should be it.

What happends: Everything that should, except - when the while() requirement is met (so when hasData is set to 0) - the loop enters into an infinite loop (and it keeps requesting the last entry, forever...until the script becomes "unresponsive")

Answer 1

ajax sends a request and executes the callback when there is a response. So what's happening is:

• fire a request
• fire another request
• fire another request
• fire another request
• ...

because it's inside a while loop. You're clogging your script up with requests, and the server gets a bunch of requests which it probably cannot handle.

Edit: I'm sorry, I missed async: false. However that always makes the browser irresponsive. The best thing to do would be using async: true and fire another if the conditional says so, but only after you get the response:

function check() {
        $.ajax({
        url: '/ajax.php?updateRow='+hasData,
        dataType: 'json',
        async: true,
        success: function(data) {
            hasData = data.next;
            $('.result').append(data.html);
            if(hasData != 0) check(); // do it again
          }
        });
}

check(); // fire the first request

As Spycho pointed out, since you're fetching JSON, a more convenient way might be:

(function() {

    var fireRequest = function() { // this function is not available anywhere else,
                                   // to avoid having this process running more than once

        $.getJSON('/ajax.php', {updateRow: hasData}, function(data) {
            hasData = data.next;
            $('.result').append(data.html);
            if(hasData != 0) fireRequest(); // do it again
        });

    };

    fireRequest(); // start the process

})(); // call it

Answer 2

Actually, what your code does is not far from a Denial of Service attack on your own server :)

The Ajax requests won't block until they are finished, as the others already pointed out. Calling $.ajax returns immediately, the actual request is executed in the background and calls the success callback upon completion. This all means that Javascript loops through the while as fast as it can, because nothing stops it. This also means that while your first request tries to finish, Javascript has probably spawned thousands of new requests which all need to be processed by the server.

Your server will become uncomfortable serving so many requests at the same time and slows down (if you check it's CPU and memory usage, you will notice). Because of the server slowing down Javascript will spawn ever more and more requests... until finally the whole system grinds to a halt because Javascript is running out of resources and your server probably, too.

A while loop is not recommended in your case. It's better to send one request at a time and check for the return value inside the success callback. If it's not 0 yet, spawn another request, and repeat the procedure.

function updateRows(onCompleted) {
    $.ajax({
        url: '/ajax.php?updateRow='+hasData,
        dataType: 'json',
        success: function(data) {
            hasData = data.next;
            if (hasData == 0) {
               return onCompleted();
            }    

            $('.result').append(data.html);
            updateRows(onCompleted); // not finished yet, recursion
        }
    });
}

The onCompleted argument would be a callback function that gets executed once your update procedure is completed. You could use it as follows:

updateRows(function() {
    // Now all rows are updated
    // Proceed with program flow
});