javascript - Loader(spinner.js) 在计算完成后显示，即使它首先被调用

Question

我有一个执行某些计算的 JavaScript 函数。它需要一段时间才能完成，所以我想在计算时向用户显示一个“等待栏”或微调器。但是，这不起作用。写不写都没关系

<button onclick="showSpinner();performCalculations();hideSpinner();">

或

function performCalculations()
{
    showSpinner();
    [performCalculations...]
    hideSpinner();
}

然后

<button onclick="performCalculations();">

就好像 JavaScript 记下了必须在所有计算完成后显示微调器、执行计算，然后显示和隐藏微调器的注释!

我有一个模糊的想法，认为这与时间有关，我担心我想要的东西可能根本不可能用 JavaScript 实现。例如显示正在运行的函数的运行输出——我知道那是不可能的。这是同一件事吗？

我认为我不应该使用 setTimeout 或 setInterval - 我不想浪费用户的时间。

我已经尝试实现 spin.js，但我无法让它工作。

如果之前有人问过这个问题，我真的很抱歉 - 我已经尝试搜索它，但我找不到任何与我的问题相似的东西。

Answer 1

Nicholas Zakas 曾经说过:

The browser UI thread is responsible for both UI updates and Javascript execution.... Only one can happent at a time

编辑: 我最初认为 spinner 函数没有立即执行，因为它们被超时延迟了，这是一个有效的点并且可能会发生，但这里的罪魁祸首是 js 单线程，因为不仅计时器被推迟并添加到稍后执行时间排队，但是ui也变了，所以js会优先完成所有在ui中没有变化的代码(纯js)，在我的例子中是循环，所以它会完成这个循环然后make更改用户界面。正如您在以下时间轴中看到的，ui 更改(紫色和绿色)发生在循环完成(黄色)之后

但是如果我们通过超时将循环添加到执行队列，它将在 ui 更改后执行，所以这可能是这种情况下的唯一修复(我能想到)，检查下一张图片你可以看到区别。

---

因为它是一个 JavaScript 微调器，所以在内部它应该使用 setInterval，这样做的目的是将函数添加到队列中，根据设计，JavaScript 首先执行未超时的代码，当它完成时到那个队列并捕获那里的东西并执行它。因此，更简单的解决方案是使用 css 微调器，您只需显示和隐藏它的 div。

Cleanest CSS spinner, ever

另一种解决方案可能是在计算中添加一个小的超时。

function performCalculations()
{

    showSpinner();
    setTimeout(function(){
      [performCalculations...] 
      hideSpinner();
    }, 0);


}

这是一个有效的 jsfiddle，证明了这一点并且它有效。 http://jsfiddle.net/621tcqh6/3/

注意:有时您必须单击两次才能显示微调器，这似乎是 jsFiddle 的问题，而不是代码本身的问题，因为我在本地进行了测试，但并没有发生这种情况

我应该说这只是基于我所知道的理论，如果你创建一个 jsfiddle，我可以测试它。希望它有助于理解为什么会发生这种情况。