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