jQuery的addClass代码后不工作

Question

我有这样的代码：新增之间

$("#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");** 
}); 

代码和删除类需要3秒，但我没有看到新的类变化... 好像add和remove类都是在内部代码之后执行的。

Answer 1

它可能与浏览器重绘呼叫有关。

正如您可能已经知道浏览器一次只执行一项任务，意味着它会执行JavaScript或刷新UI（重新绘制浏览器）。

在这种情况下，由于线程忙于执行脚本，因此可能无法找到时间用添加的类信息重新绘制UI。

一个可能的解决方案，我可以建议是使用一个超时给浏览器足够的喘息空间来更新UI下面

$("#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"); 
    }) 
});