jquery - $.each - wait for jSON request before proceeding -


i have issue below code:

the jquery.each speeding on without waiting json request finish. result, 'thisvariationid' , 'thisorderid' variables being reset latest iteration of loop before can used in slower getjson function.

is there way make each iteration of the .each wait until completion of getjson request , callback function before moving on next iteration?

$.each($('.checkstatus'), function(){             thisvariationid = $(this).attr('data-id');             thisorderid = $(this).attr('id');             $.getjson(jsonurl+'?orderid='+thisorderid+'&variationid='+thisvariationid+'&callback=?', function(data){                 if (data.response = 'success'){                 //show tick. allow booking go through                     $('#loadingsml'+thisvariationid).hide();                     $('#tick'+thisvariationid).show();                 }else{                 //show cross. not allow booking made                     $('#loadingsml'+thisvariationid).hide();                     $('#cross'+thisvariationid).hide();                     $('#unabletoreserveerror').slidedown();                     //disable form                     $('#orderform_orderform input').attr('disabled','disabled');                 }             })         }) 

two things 2 change quick fix:

  1. use var before variables make them local instead of global. way, you'll new variable instances each of iterations. use var unless intend on polluting global namespace:

        var thisvariationid = $(this).attr('data-id');     var thisorderid = $(this).attr('id'); 
  2. use == compare instead of = ;)

        if (data.response == 'success'){ 

your code start working intended after fixing these issues seem have overlooked. but, if you're willing go more drastic change, make use of deferreds.

to execute bunch of fetches in parallel:

var fetches = $('.checkstatus').map(function () {     var thisvariationid = $(this).attr('data-id'),         thisorderid = $(this).attr('id');      return $.getjson(/* blah blah */); });  fetches = $.when.apply($, fetches);  fetches.done(function () {     // parallel fetches done }); 

to serialize fetches:

var fetching = $.when();  $('.checkstatus').each(function () {     var thisvariationid = $(this).attr('data-id'),         thisorderid = $(this).attr('id');      fetching = fetching.pipe(function () {         return $.getjson(/* blah blah */);     }); });  fetching.done(function () {     // last fetch done }); 

overkill? perhaps. it's flexible, , may worth syntactic sugar of having code literally reads "when fetches done".

(note: above implementation optimistic implementation illustration purposes only. in real implementation should handle failures.)


Comments

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -