Question

I have a script that runs through a multi-level array and each time calls a new ajax GET command to a php file with part of that array as the data.
Pretty basic…

for(var x=0; x<cities.length; x++){
    for(var u=0; u<links.length; u++){
       $.ajax({
                    url: "dontneedtoknow.php?city=" + cities[x] + "&link=" + links[u],
                    type: 'GET',
                    async: false,
                    cache: false,
                    timeout: 30000,
                    error: function(){
                        return true;
                    },
                    success: function(data){ 
                          //just appending data to page
                    }
                });
   }
}

I’d like to be able to have click() events and the ability to STOP this for loop but when this loop is going I can’t do ANYTHING because of the async false.

I need the async false because I want the data to be appended as each function completes for a reason.

I have tried .live() but that doesn’t seem to work…

Ideas?

Answer 1

When async is false, the entire browser* will be hung. You cannot do anything during a synchronous Ajax call other than waiting for the call to finish.

If you want to be able to stop the loop, you must use asynchronous calls.

See also:

• What does "async: false" do in jQuery.ajax()?
• IE7 hangs when using (to much) ajax calls with async: false
• How to make all AJAX calls sequential?

That last link especially might be useful (if I understand what you’re trying to accomplish here).

---

*unless you’re in Chrome (then it’s just the current page)