在同步功能运行时显示可视指示器

Question

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

我想做的是提供计算运行的可视指示器。像修改表的不透明度之类的东西。我认为以下类似的东西可以起作用：

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

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

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

非常感谢提前！

Answer 1

这是因为在不透明度和compute();功能的修改之间没有更新UI。 UI会更新一次，而不是在每行代码之后（这会减慢所有内容）。

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

这样，您的用户界面就会在运行compute()之前得到更新。您必须将第3行（在此处将不透明度修改为1）放在该函数中，因为它将在compute()完成之前运行。

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

function compute() {
    ...

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

一开始可能看起来很脏，但这是确保用户界面更新的真正方法！

Answer 2

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 - 可能是这不适用于您的代码，但以防万一...

Answer 3

这很可能是因为你的compute（）函数执行得太快，以至于你没有察觉到不透明度的变化。

尝试在compute（）中放置一个断点，让我们知道不透明度是否发生了变化。