附加的加载器显示在 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 更新）只有在函数执行完成后才会生效

我希望我的术语是正确的