0

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

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

在这种情况下浏览器所做的是calculate()，然后显示div 当calculate() 函数首先尝试显示div 然后计算时，同样的问题。

如何使事件按预期顺序发生？

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

http://jsfiddle.net/Z7rAJ/

4

2 回答 2

2

jQuery除了在css 属性.show()中执行更改（以及对先前状态的一些魔术）之外什么也没做。display

然而，一切都发生在同步代码中。calculate()在这里首先调用您的方法几乎是不可能的。

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

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

示例：http: //jsfiddle.net/5E2bn/1/

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

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

于 2013-06-21T10:43:24.033 回答
0

做一些像 coz setTimeout 可能不是一个好的选择

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

确保返回 true 或 false ：只有在返回 calculate() 函数的值后才会显示 #busy

于 2013-06-21T10:59:16.337 回答