jquery ajax async false causes click event issue

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?

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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:

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)

edited May 23 '17 at 12:19

Community

1
1

answered Nov 05 '10 at 04:24

Matt Ball

354,903
100
647
710

is there a way to generate the same sort of effect with asynchronous calls? I am going through and pulling data from each city in my database and want it displayed in order... Otherwise it just randomly dumps it as it finishes... – sirmdawg Nov 05 '10 at 04:28
@mkprogramming: yup! see the edit I just made (the last link). – Matt Ball Nov 05 '10 at 04:29

score 0 · Answer 2 · answered Nov 05 '10 at 04:37

Why make that many calls to the server? That seems very inefficient to me.

Is there a reason you can not change the service you are calling to receive a list of items and return it? It would involve one Ajax call and the server side code can make sure the data is processed in order.

jquery ajax async false causes click event issue

2 Answers2