在执行功能期间，如何显示/隐藏动画gif？

Question

我想在执行功能期间显示动画gif（旋转器图标），然后在函数完成时隐藏gif。

但是，我正在实现的代码显然不会显示GIF，因为该函数正在引起线程，并且不允许显示GIF。

示例：（ https://jsfiddle.net/jzxu8clt/jzxu8clt/

HTML
<button onclick="go();">Go</button>
<span id="result"></span>
<hr>
<img style="display: none;" id="spinner" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif">

JS
function longLoop() {
  let count = 1000000000;
  let result = 0;
  for (let i = 1; i <= count; i++) {
    result = i;
  }
  return result;
}

function go() {
  let spinnerElement = document.getElementById('spinner');
  let resultElement = document.getElementById('result');
  spinnerElement.style.display = 'block';
  let result = longLoop();
  resultElement.innerHTML = result;
  spinnerElement.style.display = 'none';
}

）在调用长期运行函数之前显示GIF的工作，然后在长期运行函数完成时将隐藏GIF。

但是，GIF从来没有机会在浏览器中显示，我不知道如何使GIF显示。注意：如果我在调用longloop（）函数的线路上放置一个断点，则正确显示了gif。

在longloop（）函数期间，我需要做什么才能使GIF显示和动画？

Answer 1

是的，您是对的，由于JavaScript是单线读取的，因此Longloop函数正在阻止事件循环，而不是让浏览器有机会渲染GIF。

jsfiddle解决方案： https：//jsfiddle.net/12yf4tgd/12yf4tgd/ 将其包裹在承诺中，以便在完成后运行其他任务。

function go() {
  let spinnerElement = document.getElementById('spinner');
  let resultElement = document.getElementById('result');
  spinnerElement.style.display = 'block';

  new Promise(resolve => setTimeout(() => {
    resolve(longLoop())
  }))
  .then((result) => {
    spinnerElement.style.display = 'none';
    resultElement.innerHTML = result;   
  })
}

由于它是由某些Web API在其他地方处理的，而不是在主呼叫堆栈上处理，因此不会阻止它。

如果您不想因为所有嵌套而使用。

async function go() {
  let spinnerElement = document.getElementById('spinner');
  let resultElement = document.getElementById('result');
  spinnerElement.style.display = 'block';
  let result = await new Promise((resolve, reject) => {
    setTimeout(() => resolve(longLoop()))
  })
  spinnerElement.style.display = 'none';
  resultElement.innerHTML = result;
}

他们俩都以相同的方式工作。

Answer 2

运行长时间运行并恢复代码，以a settimeimout 参数省略或0将执行“立即”，或更准确地执行下一个事件周期，这将阻止阻塞。

function longLoop() {
  let count = 1000000000;
  let result = 0;
  for (let i = 1; i <= count; i++) {
    result = i;
  }
  return result;
}

function go() {
  let spinnerElement = document.getElementById('spinner');
  let resultElement = document.getElementById('result');
  spinnerElement.style.display = 'block';
  setTimeout(() => {
    let result = longLoop();
    resultElement.innerHTML = result;
    spinnerElement.style.display = 'none';
  })
}

<button onclick="go();">Go</button>
<span id="result"></span>
<hr>
<img style="display: none;" id="spinner" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif">

Answer 3

我建议您在这里使用异步/等待您的pourpuse在这里更可读的代码：一个解决方案：

function longLoop(timeout) {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

async function go() {
  let spinnerElement = document.getElementById('spinner');
  let resultElement = document.getElementById('result');
  spinnerElement.style.display = 'block';
  let result = await longLoop(4000);
  
  spinnerElement.style.display = 'none';
 
}