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

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

我想做的是提供一个视觉指示器，指示计算正在运行。诸如修改表的不透明度之类的东西。我认为类似以下的方法可以工作：

$("#mytable").css("opacity", "0.5");
compute();
$("#mytable").css("opacity", "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");
}

乍一看可能很脏，但这是确保您的用户界面已更新的一种真正方法！