Question

我有一个按钮来执行计算和指标：

<button class="btn" type="button" onclick="$('#busy').show(); calculate();">Ok</button>
<div id="busy" style="display: none;">Calculating...</div>

在这种情况下浏览器的作用是calculate（），然后显示div 当calculate（）函数首次尝试显示div然后计算时，同样的问题。

如何按预定顺序发生事件？

编辑：也许css在计算之前确实发生了变化，但是直到计算之后它才会被渲染。还尝试了点击事件处理但同样的事情。

Answer 1

jQuery的.show()除了执行display css属性的更改（以及先前状态的某些魔法）之外别无其他。

但是，所有内容都发生在同步代码中。几乎不可能在这里首先调用calculate()方法。

您的calculate()方法更有可能正在进行一些重要的同步，阻塞操作，并且浏览器将两个代码段一起批处理。碰巧在浏览器中，Javascript代码，CSS渲染和一般的“UI重绘和重排”在同一个队列中处理，因此在同一个线程中处理。我在这里谈论所谓的“ UI Queue ”。

简而言之，您需要让calculate()功能“更快”，将其分解为更小的块。最糟糕的选择是通过调用calculate()完全推迟调用setTimeout。后者将解决您的直接问题，但之后仍然会阻止浏览器和UI队列。

正如我已经说过的那样，你真的不想那样做，这只是一个明确说明的例子。在任何实际场景中，您应该回到绘图板并考虑calculate()在这里做什么以及如何将其拆分成更小的块。

在Javascript中解耦长时间运行进程的一种非常方便的方法是使用 Run-away脚本定时器，它基本上将同步循环分成多个异步循环，以提供UI队列和浏览器在代码执行之间呼吸的时间。

Answer 2

像coz setTimeout这样的东西可能不是一个好的选择

$('.btn').click(function() {
    if (calculate()) {
        $('#busy').show();
    }
});

确保返回true或false：#busy只会在返回calculate（）函数的值后显示