Question

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

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

类切换会触发opacity和visibility的更改（通过转换设置动画）。

班级改变自己工作正常;第一个在慢速例程之前执行，第二个在其他所有事件之后执行。

问题是#progressOverlay的视觉外观在myBigRoutine()完成后才会发生变化。
结果是进度覆盖在屏幕上闪烁一瞬间，然后立即再次隐藏（所有没有动画）

有没有办法强制可视化更新/重绘在大型JavaScript例程之前（或者甚至更好地与之并行）？

Answer 1

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

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

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

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

Answer 2

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

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

}

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

我希望，这就是你所需要的：）

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

2 个答案: