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

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

1 个答案: