Javascript 显示整个UI时如何开始计算

考虑最简单的情况——显示进度条、开始计算、关闭进度条

使用这样的html片段：

<p id="hello" style="display:none">HELLO WORLD</p>  

在这两种情况下，当您在控制台中获得输出时，元素同时显示（可视）

---

我是以可视化的方式编写的，因为在内部，元素可以按照已经显示的方式进行报告，但用户看到的内容很重要。

您可以将用于计算的代码放在单独的javascript函数中，即使是它的线性函数，它也不会等待计算在javascript中完成并立即移动到下一行。我在隐藏进度条之前已经等待了一段时间，因为您需要让它至少有一秒钟的可用时间

function startComputing(){
        var big = 0;
        for (var i=0;i<10000000;++i)
            if (Math.sqrt(i)>Math.cos(i)) // just to keep CPU busy
                big = i;
        console.log(i);
}

function foo()
{
    var hello = $('#hello');
    hello.html(new Date().getTime());
    hello.show();
    setTimeout(function(){startComputing();},500);
    setTimeout(function(){hello.hide()},1000);

}

函数开始计算（）{
var=0；
for（var i=0；iMath.cos（i））//只是为了让CPU保持忙碌
大=i；
控制台日志（i）；
}
函数foo（）
{
var hello=$（“#hello”）；
hello.html（new Date（）.getTime（））；
你好，show（）；
setTimeout（函数（）{startComputing（）；}，500）；
setTimeout（函数（）{hello.hide（）}，1000）；
}

$（document）.ready（）或$（body）.on（'load'，function（）{…}）？？这个问题非常不清楚。你到底想做什么？最好是plnkr…@FishBasketGordo，引用“显示进度条，开始计算，关闭进度条”。胡乱假设：当你提供

0

时，会直接在内部调用超时。使用

requestAnimationFrame

可能会先等待UI线程更新。谢谢，但正如我在评论中所写，这不起作用，您有线性工作流，更改UI是在代码计算之前，是在计算完成后完成的。这对你或我来说有用吗？仍然无法理解需要什么？关键是在计算开始之前显示“hello”（将其视为进度条）。代码看起来是这样的——屏幕是空的，计算开始（需要很长时间，用户不知道发生了什么），hello显示，计算结果显示，1秒后“hello”消失。更新的答案很难看，但在开始计算之前，我们允许DOM更新hello元素的可见性。如果这对你不起作用，你可以将setTimeout for startComputing的时间增加到1秒。奇怪的是，你击中了要害<代码>0对于超时实际上没有什么作用，但是

1

（可以“尽快”读取，但不是现在”）起作用。请将“500”改为“1”，以备将来参考。

hello.show().promise().done(function(){...

function startComputing(){
        var big = 0;
        for (var i=0;i<10000000;++i)
            if (Math.sqrt(i)>Math.cos(i)) // just to keep CPU busy
                big = i;
        console.log(i);
}

function foo()
{
    var hello = $('#hello');
    hello.html(new Date().getTime());
    hello.show();
    setTimeout(function(){startComputing();},500);
    setTimeout(function(){hello.hide()},1000);

}