Using jQuery AJAX requests in a while loop

Question

The following code will ask the user to enter their name, send it off to a processing script (saves to database, validates, etc) and returns a response:

var invalid = true;
while (invalid) {
    var name = prompt("Enter your name");
    $.ajax({
        type: "POST",
        url: "save.php",
        data: {
            "name": name
        }
    }).done(function(e) {
        //in this example, save.php returns "invalid" if the input did not pass validation
        invalid = e === "invalid";
    });
}

You can see the general idea I'm going for, but the problem is this: Even if I make the AJAX call synchronous, it doesn't block the loop from continuing. Placing a console.log in the done function reveals that the loop runs about 200 more times until my server gives a response.

The server does a heavy amount of calculations on the user's input - I'm just using name as an example here. This cannot be done client-sided. How can I implement this simple, beginner's design pattern across what is essentially reminding me of my multithreading nightmares in C#?

score 3 · Accepted Answer · answered Jan 23 '14 at 04:59

3

function validate(e)
{
    if(e === "invalid")
        setTimeout(submitName, 0);
}

function submitName()
{
    var name = prompt("Enter your name");
    $.ajax({
        type: "POST",
        url: "save.php",
        data: {
            "name": name
        }
    }).done(validate);
}

answered Jan 23 '14 at 04:59

Preston S

2,751
24
37

@RajaprabhuAravindasamy Sometimes Javascript is finicky and needs to be told to wait before doing something. Using setTimeout with a delay of 0 tells the browser to wait for everything to finish before doing anything else. Great explanation here: http://stackoverflow.com/a/779785/382456 – Scott Jan 23 '14 at 05:05
2

@RajaprabhuAravindasamy Kind of, using setTimeout invokes the method on a fresh call stack. I used it here to prevent the possibility of stack overflow or too much recursion exception. – Preston S Jan 23 '14 at 05:06

score 2 · Answer 2 · answered Jan 23 '14 at 04:58

2

Instead of a loop, just re-trigger the input from the done() code. You'd probably want to name this function so it can refer to itself.

answered Jan 23 '14 at 04:58

Ted Bigham

4,237
1
26
31

score 0 · Answer 3 · answered Jan 23 '14 at 05:33

That just worked great for me. I hope it works for you too.

        var invalid = true;
        while (invalid) {
            var name = prompt("Enter your name");
            console.log(Date()+' Start Loop');
            $.ajax({
                 type: 'POST',
                 data: {'name': name},
                 async: false,
                 url: yourURL
            }).done(function(e) {
                //in this example, save.php returns "invalid" if the input did not pass validation
                console.log(Date()+' Done()');
                invalid = (e === "invalid");
            });
            console.log(Date()+' End Loop');
        }

Using jQuery AJAX requests in a while loop

3 Answers3

Linked