我有一些问题:
我有一个资源昂贵的操作(在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
元素?
答案 0 :(得分: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);
}
}
}