Question

我正在遍历一个大约250行的表。不符合特定条件的每一行都将从footable（我正在运行）中删除。 footable.removeRow()函数非常慢，因为分页问题，我不能只.hide()。

我想在迭代发生时显示进度条（由用户决定）。我有以下html拉表单引导程序。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    </div>
</div>

我有以下在迭代开始时执行的javascript代码。

$('.group-show-only').click(function(){
    //parent container
    var pill = $(this).closest('.group-pill');
    //show progress bar
    pill.find('.progress').show();
    //used to determine if row is removed
    var id = pill.attr('group-id');
    //get all table rows
    var rows = $('.footable tbody').find('tr');
    var count = rows.length;
    var i = 0;
    //the actual progress bar
    var bar = pill.find('.progress-bar');
    //the footable
    var footable = $('table').data('footable');
    rows.each(function(){
        //this is the problem, the loop bottle necks, the bar just sits at zero for about 5 seconds, and then jumps to 100
        bar.css('width', (i*100/count) + '%');
        //confirming the bottle neck
        console.log(i);
        if(!$(this).find("input[group="+id+"]").attr('checked')){
            footable.removeRow(tr);
        }
        i++;
    });
});

问题是酒吧在零位置停留约5秒然后跳到100点。资源必须是瓶颈。有没有办法防止这种情况，因此进度条平滑增加并显示循环的实际进度？

由于

jQuery。带有进度条

0 个答案: