javascript - 如何在插入大量 dom 元素时显示 'working' 指示器

Question

在创建和插入 DOM 元素时，用于任务的函数似乎在元素显示在页面中之前返回。

在开始插入元素之前，我将 div 的显示属性设置为“ block ”，在插入元素之后，我将属性设置为“无”，问题是，指示器未显示在页面中。有可能实现这个吗？其中 $ 是 document.getElementById 的别名。

$('loading').className="visible";
var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
    var para = document.createElement('p');
    para.appendChild(document.createTextNode('Paragraph No. ' + i));
    container.appendChild(para);    
    }
$('loading').className="hidden";

它显示为 createElement 和/或 appendChild 异步运行，所以我几乎立即隐藏了指示器？

Answer 1

setTimeout() 就是答案。一个简单的“一行”更改:

$('loading').className="visible";
setTimeout(function() {
    var container = document.getElementById('container');
    for(var i=0; i< 50000; i++){
        var para = document.createElement('p');
        para.appendChild(document.createTextNode('Paragraph No. ' + i));
        container.appendChild(para);    
    }
    $('loading').className="hidden";
}, 0);