Bootstrap 进度条未更新

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 bar 和 HTML5 Tag 的类似解决方案<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);
}