JavaScript 动画卡住，仅显示最终结果

Question

我正在尝试在 JavaScript 中摆弄并创建一个小的 fadeOut 函数， 这就是我想到的:

function fadeOut(id, time){
  var elem = document.getElementById(id);
   elem.style.opacity = 1;
   var opc = 1;
   while(opc >= (1/time)){
      opc -= (1/time);
      console.log(opc);
      elem.style.opacity = opc;
   }
   elem.style.opacity = 0;
}

但这不会“实时”显示 div 的不透明度，而是显示最终结果，即 opacity = 0;
我在这里测试过:

fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;

计算需要很长时间，只有计算完成后才会转储结果，
在计算时没有无缝地显示它，
我该如何解决这个问题？

Answer 1

您需要设置计时器，因为在您的函数完成且事件处理程序可以运行之前，UI 不会更新。