javascript - 同步功能运行时显示视觉指示器

Question

我有一个名为 compute() 的函数，它会执行一系列计算，然后更新 HTML 表的值，由 click() 事件触发。这不是 ajax 调用，只是几个 for 循环。

我想做的是提供一个视觉指示器来指示计算正在运行。比如修改表格的不透明度。我认为像下面这样的东西可以工作:

$("#mytable").css("opacity", "0.5");
compute();
$("#mytable").css("opacity", "1");

但是当我使用此代码时，不透明度似乎没有被修改。

关于如何执行此操作有任何提示吗？

提前非常感谢!

Answer 1

这是因为在修改不透明度和 compute(); 函数之间 UI 没有更新。 UI 每隔一段时间更新一次，而不是在每行代码之后更新(这会减慢一切)。

您可以使用超时来绕过它:setTimeout(compute, 0);。

这样您的 UI 就会在运行 compute() 之前得到更新。您必须将第三行(将不透明度修改回 1)放在该函数中，因为它将在 compute() 完成之前运行。

$("#mytable").css("opacity", "0.5");
setTimeout(compute, 0);

function compute() {
    ...

    $("#mytable").css("opacity", "1");
}

一开始可能看起来很脏，但这是确保您的 UI 更新的真正方法!