CODEWITHSUNDEEP
phpjavascriptjqueryajaxjson
pyronaur
pyronaur

Reputation: 3545

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

       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")

Upvotes: 2

Views: 355

Answers (5)

pimvdb
pimvdb

Reputation: 154818

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

Upvotes: 6

emboss
emboss

Reputation: 39620

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
});

Upvotes: 4

Felix Glas
Felix Glas

Reputation: 15524

Because you have set async to false the browser will hang until a response is available. It's possible that your script is not stuck in an infinite loop, it just waits for the response.

Check that your server side script actually works.

Upvotes: 0

Radek
Radek

Reputation: 515

also I suggest you cast your response data to number like

hasData = data.next * 1;

as sometimes even if JSON returns a number, its not considered to be a number by javascript and comparison

hasData != 0

comes true even if hasData="0" ...

Upvotes: 0

duri
duri

Reputation: 15351

The first A letter in AJAX means "asynchronous". The browser doesn't wait for the response after the initial $.ajax() call, but calls this function many many times.

var hasData = 1;
function ajaxRequest()  {
    $.ajax({
        //...
        success: function(data) {
            hasData = data.next;
            $('.result').append(data.html);
            if (hasData != 0)
            {
                ajaxRequest();
            }
        }
    });
}

Upvotes: 1

Related Questions