2

我通常在调用数据库之前在我的站点中添加加载器，因此通常在使用$.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/

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

谢谢。

4

1 回答 1

3

这是因为在更新 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)
});

演示：小提琴

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

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

我希望我的术语是正确的

于 2013-06-20T11:12:06.163 回答