javascript - 如何在正常函数调用之前显示某些内容而不是之后停止显示？

Question

我希望在正常功能运行时显示加载图像(需要一段时间)

例如

function(){
    element.style.display = 'block';
    functionThatTakesAWhile()
    element.style.display = 'none';
}

我的问题是我从未看到该元素。

-谢谢。

Answer 1

在调用functionThatTakesAWhile之前，让浏览器有机会呈现更改后的显示。首先调用 requestAnimationFrame，它将在浏览器重绘之前运行，并在其中设置一个超时，该超时将在浏览器重绘之后运行。在该超时时间内，运行昂贵的函数:

const functionThatTakesAWhile = () => {
  for (let i = 0; i < 2e9; i++);
};

console.log('script start');
// Make sure page is loaded fully first, just for the sake of this example
setTimeout(() => {
  element.style.display = 'block';
  console.log('element set to block');
  window.requestAnimationFrame(() => {
    // This callback will run just before the browser paints and displays the element
    setTimeout(() => {
      // By this time, the browser will have painted the element,
      // so you can call the expensive function
      functionThatTakesAWhile()
      element.style.display = 'none';
      console.log('element set to none');
    });
  });
}, 2000);

content
<div id="element" style="display: none">element</div>

但是，当昂贵的功能运行时，这仍然会卡住用户的浏览器选项卡。如果可能的话，最好在单独的线程(在网络工作线程中)中运行昂贵的函数 - 这样，选项卡将继续响应。