Question

我正在使用jQuery对表（客户端）进行排序。该表是可变长度的，当数据集很大时，排序可能需要大约3-5秒。当javascript对我的表进行排序时，我想用微调器或“请等待”通知显示div（id =“排序”）。但是，通知未按预期工作。以下是我的代码的要点：

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))

}

javascript仅客户端加载通知

1 个答案: