Geek Answers Handbook

How can I make my code wait until all the loop code has completed before continuing?

I iterate through a group of html elements using jquery each . At each iteration, I call a get . I want to track successful results and display the score at the end.

 var numSuccessful = 0; $('.mySelector').each(function(){ $.get('/myCfc.cfc?method=doSomething&id=' + $(this).attr('id'), function(data){ numSuccessful++; }); }); alert(numSuccessful + ' successful');

The problem with this code is that each method launches all get calls, and then continues with a warning before the get finishes - and before the numSuccessful variable is updated. On the test run, I ended up with "0 successful" instead of "4 successful" because the warning ran too fast. How can I make the code wait for it to finish before continuing? Is there a success callback for the whole "every" statement?

+4
source share
4 answers

Just replace $.get with $.ajax and set the async parameter to false.

 $.ajax({ url : '/myCfc.cfc', data : { 'method' : 'doSomething' , 'id' : $(this).attr('id') }, async : false, success : function(data){ numSuccessful++; } });

Having done this, the script will wait until it receives a response.

+1
source

You can use a recursive function, try the following:

 var num = 0; var $ms = $('.mySelector'); function go() { $.get('/myCfc.cfc?method=doSomething&id='+$ms.eq(num).attr('id'), function(data){ num++; if ((num-1) == $ms.length) callback(); else go(); }).error(callback) } function callback(){ alert(num) } go()
+1
source

You can use the promise returned by $.ajax to set up a flexible callback queue as follows:

 var requests = []; //Array containing all the ajax calls for (var i = 0; i < 9; i++) { requests.push( $.ajax({ url: '/echo/html', //this is because of jsfiddle.net type: 'post', //this one too success: function() { //whatever } })); } $.when.apply($, requests).then(function() { //.apply is needed as we want to pass an Array //called when all requests are done }).fail(function(){ //this will be triggered when one of the requests fails //error handling can go here });

See this working fiddle and read about .when() and .then

In your case, this will end:

 var numSuccessful = 0; var requests = $.makeArray($('.mySelector').map(function(){ return $.ajax({ url: '/myCfc.cfc?method=doSomething&id=' + this.id, type: 'GET' }).done(function(){ numSuccessful++; }); })); $.when.apply($, requests).then(function() { alert(numSuccessful + ' successful'); });​
+1
source 
 var numSuccessful = 0; var totalSelectors = $('#mySelector').length; $('#mySelector').each(function(){ $.get('/myCfc.cfc?method=doSomething&id=' + $(this).attr('id'), function(data){ numSuccessful++; if(!totalSelectors--) doneSelectors(); }); }); function doneSelectors() { alert(numSuccessful + ' successful'); }

Note. The above function does NOT work correctly! $.get() does not report errors, so if you get any errors, the final function will never work.

Instead, you need to convert it to use the $.ajax() function. Define both successful and failover callbacks. If you need help, let me know.

0
source

More articles:


All Articles