Javascript 在资源消耗高的操作中强制重新绘制元素

我有一些问题：

我有一个资源昂贵的操作（将元素生成到DOM中）。以前，我只是在开始时调用该操作，但是当有许多元素要生成时，页面只会阻塞几秒钟，其中包含不可查找的元素，等等

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

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

函数生成（）{
变量$content=$（'#content'），$progress=$（'#progress'），count=0；
对于（变量x=1；x<100；x++）{
对于（变量y=1；y<100；y++）{
$content.append（''+x+'-'+y+''）；//将元素添加到DOM中
$progress.html（'生成的元素：'+count++）；
}
}

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

---

有没有一种方法可以强制浏览器重新绘制

$progress

元素？

这是未经测试的，但应该可以让您非常接近您想要的内容

   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);
            }
        }
    }

函数生成（）{
变量$content=$（'#content'），$progress=$（'#progress'），count=0；
对于（变量x=1；x<100；x++）{
对于（变量y=1；y<100；y++）{
（函数（x，y）{
setTimeout（函数（）{
$content.append（“”+x+“”-“”+y+“”）；
$progress.html（'生成的元素：'+count++）；
}，数学最小（x+y，100））；
})（x，y）；
}
}
}

偶尔使用

setTimeout

（稍后在回调中继续工作）。这将“让出”控件回到浏览器，以便它可以呈现DOM更新，等等，这实际上是一种“不太极端”的形式，你能给我解释一下

Math.min（x+y，100）吗

part？您可能不需要它。老实说，

100

可能会很好。您必须测试它。因为我没有测试它，所以我想确保有一个偏移量，但如果更改循环最大值，您就不会等待数秒（或数分钟）

   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);
            }
        }
    }