Question

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

直到现在我才遇到任何问题，我在尝试在一些需要一段时间执行的随机代码之前添加一个加载器。

我可以看到append元素如何被加载到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更新）只有在完成功能执行后才会生效

我希望我的术语正确

附加的加载器在DOM中显示但未呈现

1 个答案: