javascript - jquery addClass before code and removeClass after code don't work -

i have code:

$("#add_city").click(function() {        **$("#gif_loader").addclass("overlay");**     var ott = tabletools.fngetinstance( 'tab_citta' );     var aselectedtrs = ott.fngetselected();     var totadded = 0;     $.each(aselectedtrs, function(i, item) {         totadded = totadded + $(this).children().eq(1).html() * 1;         addrowaddedcity($(this).children().eq(0).html(),                         "<span class='val_or right' style='text-align:right;'>"+$(this).children().eq(1).html()+"</span>",                         "<input type='text' class='new_val right' value='" + $(this).children().eq(1).html() + "' />");                  var pos = otableaddedcity.fngetposition($(this).get(0));         otablecity.fndeleterow(pos);                 });              ott.fnselectnone();     $('#tot_city_sel').html( $('#tot_city_sel').html() * 1 + totadded );     **$("#gif_loader").removeclass("overlay");** }); 

the code between add , remove class take 3 seconds don't see new class change ... seems add , remove class both executed after inside code.

it might have browser repaint call.

as might know browser 1 task @ time, mean either execute javascript or refresh ui(repainting browser).

in case since thread busy executing script may not find time repaint ui added class information.

one possible solution can suggest use timeout give browser enough breathing space update ui given below

$("#add_city").click(function() {        $("#gif_loader").addclass("overlay");     settimeout(function(){         var ott = tabletools.fngetinstance( 'tab_citta' );         var aselectedtrs = ott.fngetselected();         var totadded = 0;         $.each(aselectedtrs, function(i, item) {             totadded = totadded + $(this).children().eq(1).html() * 1;             addrowaddedcity($(this).children().eq(0).html(),                             "<span class='val_or right' style='text-align:right;'>"+$(this).children().eq(1).html()+"</span>",                             "<input type='text' class='new_val right' value='" + $(this).children().eq(1).html() + "' />");                      var pos = otableaddedcity.fngetposition($(this).get(0));             otablecity.fndeleterow(pos);                     });                  ott.fnselectnone();         $('#tot_city_sel').html( $('#tot_city_sel').html() * 1 + totadded );         $("#gif_loader").removeclass("overlay");     }) });