javascript - 在同步函数运行时显示视觉指示器

Question

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

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

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

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

关于如何做到这一点的任何提示？

提前谢谢了！

score 2 · Accepted Answer

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 更新的真正方法！

score 0 · Accepted Answer

JavaScript 的所有客户端实现都是单线程的，因此您不能真正期望函数调用compute在执行下一条语句时继续运行。
但是，如果您愿意，可以使用web worker来生成一个后台线程。

在第二次阅读您的问题后，我必须说@tomdemuyt 很可能是正确的：它很可能compute执行得如此之快以至于不透明度在一瞬间改变了两次，如此之快以至于您几乎没有注意到它的变化。另外，由于这是一个事件处理程序，您可能需要考虑这一点：

function compute(e)
{
    $(this).css({opacity:'.5'});
    //rest of your code
    $(this).css({opacity:'1'});
}
$('#mytable').on('click',compute);

这只是更整洁的IMO - 这可能不适用于您的代码，但以防万一......

score 0 · Accepted Answer

这很可能是因为您的 compute() 函数执行得如此之快，以至于您没有察觉到不透明度的变化。

尝试在 compute() 中设置断点，让我们知道不透明度是否发生了变化。

3 回答 3