javascript - 进度条在繁重的工作中不会重绘，即使我尝试了很多方法来强制重绘

Question

我有一个 JavaScript 方法可以迭代约 200 个输入、插入值并在它们上触发 onchange 事件。这在 Chrome 中大约需要 2000 毫秒，在 IE 中大约需要 10000 毫秒。

我想制作一个进度条来显示进度。

现在，问题是浏览器不会重新绘制进度条，直到进程结束时，它会立即达到 100%。

在这里研究后，我找到了三种方法并尝试了所有方法，但它们都不起作用:

• 在具有零或非零(例如 200 毫秒)超时的 setTimeout 中运行进度条更新
• 访问元素或相邻元素的高度属性，这应该强制重绘
• 同时显示/隐藏元素并访问 offsetHeight 属性。

这是我的代码:

    <div class="cg-progress-bar">
        <div class="cg-progress-bar-completed">
            &nbsp;
        </div>
        <div class="cg-inline-block cg-progress-bar-force-repaint">
            &nbsp;
        </div>
    </div>

JavaScript:

var progressBarCurrent = 0;
var progressBarTotal = 236;

$.each(sqlData, function(column, value){
        //doing some work here to update values in inputs

        //update progress bar
        progressBarCurrent++;
        if (progressBarCurrent % 22 === 0) { //don't call too often
            var percentageComplete = Math.floor( (progressBarCurrent/progressBarTotal)*100 ) + "%";    

            var bar = $(".cg-progress-bar-completed").width(percentageComplete)[0];

            //hack 1
            bar.style.display = 'none';
            bar.offsetHeight;
            bar.style.display = '';

            //hack 2
            setTimeout(function() { bar.style.display = 'block'}, 0);

            //hack 3
            $(".cg-progress-bar-completed").animate({ width: percentageComplete }, 100).height();

            //hack 4 - insert empty text node
            bar.appendChild(document.createTextNode(' '));
            $(bar).hide().show(0);
            bar.appendChild(document.createTextNode(' '));

            //hack 5 - nuclear option
            $(window).trigger("resize");
        }
    }
});

如何强制浏览器重绘？

Answer 1

可能您的进程太繁重并且正在崩溃执行线程。这意味着在计算时浏览器会稍微卡住，并且在处理计算时可能无法与 UI 进行其他交互。

为了避免这种情况，HTML5 提供了网络 worker 技术。这是一种在浏览器环境中模拟多任务处理的方法，允许您执行繁重的任务，避免浏览器卡住。

这里有一篇关于这项技术的优秀介绍文章，我已经成功地使用它创建了一个能够上传 Gb 长度文件并保持实时进度条的文件 uploader :

https://www.html5rocks.com/en/tutorials/workers/basics/

希望对你有帮助。