javascript 仅客户端加载通知

Question

我正在使用 jQuery 对表(客户端)进行排序。该表是可变长度的，当数据集很大时，排序可能需要大约 3-5 秒。我想在 javascript 对我的表进行排序时显示一个带有微调器或“请稍候”通知的 div (id="sorting")。但是，通知未按预期工作。这是我的代码的要点:

var sortableList;
var sortField;
var sortDir;
$(document).ready(function(){
    $('body').delegate('.sortable-heading','click',function(){
        sortData($(this));
    });
});

function sortData(obj){
    $('#sorting').show();
    sortableList = [];
    $('.data-row').each(function(){
        var rowData = {};
        var sortKey = obj.attr('id');
        var i = obj.index();
        var val = $(this).find('td:eq(' + i + ') .val-text').text();
        if(sortKey == 'adjHeading'){
            val = $.trim(val);
        }else{
            val = $.trim(val) ? parseInt(val) : 0;
        }
        rowData[sortKey] = val;
        rowData.rowHtml = $(this).clone().wrap('<p />').parent().html();
        sortableList.push(rowData);
    });
    redrawTable(obj);
}

function redrawTable(obj){
    if(obj.attr('id') == sortField){
        sortDir = sortDir == true ? false : true;
    }
    sortField = obj.attr('id');
    var primer = sortField == 'adjHeading' ? function(a){return a.toUpperCase()} : parseInt;
    sortableList.sort(sort_by(sortField,sortDir,primer));

    $('#pivot-table-1').html(topRowHeading1 + topRowHeading2);
    for(var i in sortableList){
        $('#pivot-table-1').append(sortableList[i].rowHtml);
    }
    $('#sorting').hide();
}

当点击函数触发时，表格被排序，我再也看不到我的加载 div。如果我注释掉 $('#sorting').hide() 调用，div 只会在表格排序后显示。我虽然 javascript 应该从上到下执行。知道为什么不在这种情况下吗？

谢谢

Answer 1

浏览器页面将像一个单线程应用程序一样运行，一次只会运行一个任务，例如运行脚本/更新 UI/响应用户事件等

在您的情况下，在调用 show() 后不久，下一个脚本就会运行，这需要一些时间，因此浏览器没有任何时间来更新 UI 以显示元素。这里的解决方案是在显示元素后使用 setTimeout，这样浏览器就可以腾出时间来显示元素，然后执行下一个脚本

function sortData(obj){
    $('#sorting').show();

    setTimeout($.proxy(function(){
        sortableList = [];
        $('.data-row').each(function(){
            var rowData = {};
            var sortKey = obj.attr('id');
            var i = obj.index();
            var val = $(this).find('td:eq(' + i + ') .val-text').text();
            if(sortKey == 'adjHeading'){
                val = $.trim(val);
            }else{
                val = $.trim(val) ? parseInt(val) : 0;
            }
            rowData[sortKey] = val;
            rowData.rowHtml = $(this).clone().wrap('<p />').parent().html();
            sortableList.push(rowData);
        });
        redrawTable(obj);
    }, this))

}