在 JavaScript 运行之前重新绘制 CSS(以显示进度指示器)

Question

我有一个JS例程（由用户触发），可能需要一些时间才能完成。在例程运行时，我想在屏幕上显示进度叠加。下面是调用例程的代码（调用此例程是为了响应单击事件）：

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
}

类切换会触发opacity和visibility的更改（使用过渡进行动画处理）。

类更改本身工作正常;第一个在慢速例程之前执行，第二个在其他所有内容之后执行。

问题是#progressOverlay的视觉外观直到myBigRoutine()完成后才会改变。
结果是进度叠加在屏幕上闪烁一瞬间，然后立即再次隐藏（全部没有动画）

有没有办法强制视觉更新/重绘发生在大型 JavaScript 例程之前（或者更好的是，与大型 JavaScript 例程并行发生？

Answer 1

可以将事件绑定到动画完成。因此，当动画完成时，只有这样您的代码才会执行，

function handleClick() {
    $('div#progressOverlay').removeClass('hidden');
}
$("div#progressOverlay").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
});

我希望，这就是你需要:)

Answer 2

myBigRoutine()函数应该异步调用。

function handleClick() {
  $('div#progressOverlay').removeClass('hidden');
  setTimeout(function() {
    myBigRoutine();
    ...
    $('div#progressOverlay').addClass('hidden');
  }, 150);
}

150 是一个幻数，表示超时延迟（以毫秒为单位）。它可以是任何小数字。

此外，请考虑使用 .hide() 和 .show() jQuery 方法，而不是hidden类。