在资源昂贵的操作中强制重新绘制元素

Question

我有一些问题：

我有一个耗费资源的操作（将元素生成到 DOM 中）。之前我只是在启动时调用操作，但是当有很多元素要生成时，页面只是卡了几秒钟，有不可点击的元素等等。

所以我放了一个全屏显示元素生成的进度。但不知何故，浏览器（Ubuntu 14.04 上的 Chromium）没有呈现进度。

类似的代码（因为我的太长无法粘贴）：

function generate() {
    var $content = $('#content'), $progress = $('#progress'), count = 0;
    for(var x = 1; x < 100; x++) {
        for(var y = 1; y < 100; y++) {
            $content.append('<span>' + x + '-' + y + '</span>'); // adding an element into DOM
            $progress.html('Generated elements: ' + count++ );
    }
}

元素已正确生成，但生成的元素数量没有变化（保持为 0，这是 HTML 代码中的默认值）。

有没有办法强制浏览器重新绘制$progress 元素？

Answer 1

这是未经测试的，但应该让你非常接近你想要的。

   function generate() {
        var $content = $('#content'), $progress = $('#progress'), count = 0;
        for(var x = 1; x < 100; x++) {
            for(var y = 1; y < 100; y++) {
                (function(x, y) {
                        setTimeout(function() { 
                             $content.append('<span>' + x + '-' + y + '</span>');
                             $progress.html('Generated elements: ' + count++ );
                        }, Math.min(x + y, 100));
                })(x, y);
            }
        }
    }