Question

我需要处理大量JSON数据的过滤器（目前为1.5 MB并且还在增长）。过滤数据的代码已编写并正常工作，但由于过滤所需的时间，我想显示进度条。

我决定使用Bootstrap进度条并在循环期间更新它的当前值。我尝试使用以下代码：

HTML

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

JS

$("#bar").css("width", percentage + "%").attr("aria-valuenow",percentage);

这样可以正常工作 - 只要我在像chrome中的开发人员工具这样的调试器中踩过它。在没有断点/调试器的情况下加载页面/运行代码会导致未更新的进度条。目前的进度不会在浏览器中呈现。我还尝试了使用jqueryUI-progress栏和HTML5标签<progress>的类似解决方案 - 但结果相同。

在设置新的进度值后，有什么建议我做错了或如何刷新/渲染DOM？

完整循环代码：

for(var i=0;i<indexes.length;i++) {
    searchterm = "//data[setting = " + indexes[i] + "]";

    for(var j=0;j<jsondata.length;j++){
        current = jsondata[j];
        infoData = {};
        found = JSON.search(current,searchterm);
        if(found.length > 0){
            infoData.licenseNr = current.licenseNr;
            infoData.data = found;
            filteredData.push(infoData);
        }
    }
    percentage = (i+1) * (100/indexes.length);
    $("#bar").css("width", percentage + "%").attr("aria-valuenow",percentage);
}

Bootstrap进度条未更新

0 个答案: