javascript - 附加的加载程序显示在 DOM 中但未呈现

Question

我通常在调用数据库之前在我的网站中添加加载器，因此通常在使用 $.post 函数之前。

到目前为止，我从未遇到过任何问题，因为我自己尝试在一些需要一段时间执行的随机代码之前添加加载程序。

我可以看到追加元素是如何加载到 DOM 中的，但它没有被渲染。

这是说明问题的示例代码:

$('.demo').click(function(){

    alert("Starting...");

    //won't be rendered until the FOR finishes
    $(this).append(' Loading...');

    for(var i = 0; i<800000000; i++){
     var nothing = 1 + Math.floor(Math.random() * i);
    }

});

这是一个活生生的例子: http://jsfiddle.net/88398/1/

如何在执行以下代码之前渲染加载器？

谢谢。

Answer 1

这是因为更新 dom 后，浏览器在函数完成之前没有时间重新绘制 UI。

一种可能的解决方案是使用 setTimeout() 来延迟任务，这将为浏览器提供更新 UI 的时间，然后执行 setTimeout 回调。

$('.demo').click(function(){
    alert("Starting...");
    $(this).append(' Loading...');

    setTimeout(function(){
        for(var i = 0; i<800000000; i++){
            var nothing = 1 + Math.floor(Math.random() * i);
        }
    }, 10)
});

演示:Fiddle

原因是浏览器选项卡像单个线程一样运行，浏览器一次只能执行一项任务。这意味着它可以更新 UI 或运行脚本。

在您的情况下，您有一个函数，其中所做的任何更改(dom update)只有在函数执行完成后才会生效

我希望我的术语是正确的