Pause jQuery ajax script until script returns successfully

Question

I have the following code at the end of an .each() function that loops close to 50 times.

$.ajax({
    type: "POST",
    url: "/process.php",
    data:  "info="+info,
    success: function(html){
        // $('#container').html(html);          
    }
});

How can I pause the script during each iteration so it will wait until each ajax post is successful before executing the next .each()?

I'm basically trying to prevent the queuing of ajax requests.

are you trying to block issuing each AJAX request until the subsequent one returns? For what purpose? — wrschneider, Nov 30 '11 at 03:23

score 2 · Answer 1 · answered Nov 30 '11 at 03:02

2

All you need to do is add an async:false property. For example:

$.ajax({
    type: "POST",
    url: "/process.php",
    data:  "info="+info,
    async: false,
    success: function(html){
        // $('#container').html(html);          
    }
});

However, you should be aware that this will essentially "freeze" the page until all the AJAX calls complete. Making a synchronous request like this is rarely a necessity, so unless you're doing this for some kind of internal use where user experience isn't very important, I'd strongly encourage you to try coming up with an asynchronous way of achieving what you're after.

answered Nov 30 '11 at 03:02

maxedison

17,243
14
67
114

1

Please don't do this. It it a huge cause for UI hangs. This has been discussed many places, including here: http://stackoverflow.com/questions/5399080/can-this-be-done-without-synchronous-ajax – Jonathan M Nov 30 '11 at 03:04
Eeeeeew, no. This will hang the browser in a most nasty, unnecessary manner, while the requests are in progress. – Matt Ball Nov 30 '11 at 03:04
I used to think I had one of those cases in the 0.01%, but I have *yet* to find a case where a synchronous call is needed. Each time, with a bit of extra thinking, I've come across the correct solution, which has always involved asynch. – Jonathan M Nov 30 '11 at 03:09
2

There's a special place in hell for people who use or recommend `async:false`. – Raynos Nov 30 '11 at 03:14
@Raynos -- So I guess John Resig will be ruling that place in hell for even offering it as an option. And to you as well as Jonathan, did you both simply decide to ignore my last paragraph where I essentially said synchronous requests are--and I quote--"rarely a necessity"? There absolutely ARE cases where it's at the very least acceptable, if not actually a necessity. Internal organization use is an example where something like this might be fine and even preferred over spending more time coming up with a more complicated solution that provides no user benefit and therefore simply wastes time – maxedison Nov 30 '11 at 03:38
I'll also add that I'm the only one thus far who has answered the OP's actual question: "How can I pause the script during each iteration so it will wait until each ajax post is successful before executing the next .each()?" My answer is the exact way in which you would "pause" such an iteration. Sure, a better implementation very likely exists--which is precisely why I said so. But I don't know the context of the OPs implementation, and I therefore chose not to assume one like everyone else. – maxedison Nov 30 '11 at 03:45
"There absolutely ARE cases where it's at the very least acceptable," that's a lie. Your not a "pausing" your spinning a busy loop. it's a `while (not_enough_waiting_is_done) { /* no op */ }`. Simply put synchronous ajax is always the wrong answer. – Raynos Nov 30 '11 at 04:10
Nope. I've used it myself for internal company pages. Sure, I could have spent 10 more minutes doing it in an asynchronous way, but the result would not have been any more useful than the synchronous way. So that would have been 10 wasted minutes. Amazing that you're getting so bent out of shape over something that is in 99.9% of agreement with you. – maxedison Nov 30 '11 at 13:13
@maxedison, it's cool, bro. You got no downvotes from me, just some cautions to make a strong point: don't do it. It's a very bad idea. (BTW, my comment was before your edit, and, as you say, prompted it.) – Jonathan M Nov 30 '11 at 13:57
1

Ok, well if the OP comes back with a new post about how he implemented a synchronous request on a page for anything other than internal use, we'll all gang up on him :) – maxedison Nov 30 '11 at 16:57
@maxedison: Well I certainly learned a lot from this discussion, so upvote to you. At the same time, since the consensus seems to be that a little extra work constitutes a better implementation, I think I will try to go with another asynchronous route. Thank you! – kylex Nov 30 '11 at 17:58
I'm clearly the 1% of cases then, because without using synchronous execution, it'd be — to all intents and purposes — impossible to do what I've just done. – Wayne Smallman Jun 24 '13 at 09:25

score 1 · Accepted Answer · edited May 23 '17 at 10:30

Don't use an explicit loop. Move each next-ajax call into the success handler of the previous one. Or queue the requests programmatically.

var numRequests = 50;

function nextAjax()
{
    if (numRequests > 0)
    {
        $.ajax({
            // snip...
            success: function (html) {
                // $('#container').html(html);
                nextAjax();
            }    
        });
    }

    numRequests--;
}

nextAjax();

score 0 · Answer 3 · answered Nov 30 '11 at 03:03

0

Have the callback function kick off the next request.

answered Nov 30 '11 at 03:03

Jonathan M

17,145
9
58
91

Pause jQuery ajax script until script returns successfully

3 Answers3