为什么引导旋转器在计算密集型上下文中不可用

Question

我知道Javascript是单线程的。但是，我不明白为什么下面的代码在计算密集型任务之前/之后不显示/隐藏一个自旋器。

代码大纲：

showSpinner();
computeIntensiveTask();
hideSpinner();

代码(我使用的是引导旋转器)

const showSpinner = () => {
    const $spinner = $('#spacewalk-spinner').find('.spinner-border');
    $spinner.show();
};

const hideSpinner = () => {
    const $spinner = $('#spacewalk-spinner').find('.spinner-border');
    $spinner.hide();
};

函数computeIntensiveTask()做了大量的sqrt()和其他三维矢量数学。

当代码运行时，旋转器就不会出现。为什么会发生这种情况？

更新0

作为一项测试，我尝试简单地更新spinner元素之前/之后的颜色：

在document.getElementById('spacewalk-spinner').style.color = 'rgb(255,0,0)';之前

document.getElementById('spacewalk-spinner').style.color = 'rgb(0,255,0)';后

只有“后”颜色发生了变化。

更新1

来澄清。如果我删除对hideSpinner()的调用并将showSpinner()更改为document.getElementById('spacewalk-spinner').style.display = 'block'。旋转器在 computeIntensiveTask()完成后显示computeIntensiveTask()。尽管如此，我还是把computeIntensiveTask()放在window.setTimeout的调用中，等待了500 ms。

Answer 1

您需要使用setTimeout函数协调UI的更新。此外，您还需要在更新UI时定位showSpinner和hideSpinner函数。以这个片段为例。

​

const showSpinner = () => {
  const $spinner = $('#spacewalk-spinner').find('.spinner-border');
  $spinner.show();
  console.log('show');
};

const hideSpinner = () => {
  const $spinner = $('#spacewalk-spinner').find('.spinner-border');
  $spinner.hide();
  console.log('hide');
};


const computeIntensiveTask = () => {
  showSpinner();
  // begin the calculations after the UI updates by using setTimeout
  setTimeout(function() {
    for (var start = 1; start < 1000; start++) {
      // calculating...
      console.log('calc');
    }
    hideSpinner();
  }, 0);

};

computeIntensiveTask();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="spacewalk-spinner">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

​

Answer 2

试试这个：

showSpinner();
setTimeout(() => {
    computeIntensiveTask();
    hideSpinner();
}, 300);