如何在插入大量dom元素时显示"工作"指示符

Question

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

在开始插入元素之前,我将div的display属性设置为'block',插入元素后我将属性设置为'none',问题是,指示符没有显示在页面中.有可能实现这一目标吗？其中$是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);