当我在 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
});

Answer 3

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

Answer 4

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

Answer 5

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.