jQuery代码前的addClass和代码后的removeClass不起作用

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秒钟，但是我看不到新类的更改。似乎添加和删除类都在内部代码之后执行了。

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