1

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

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

类切换触发opacity和visibility（带有过渡动画）的变化。

班级变更本身运行良好；第一个在慢例程之前执行，第二个在其他所有程序之后执行。

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

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

4

2 回答 2

1

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

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

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

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

于 2012-05-26T05:41:58.153 回答
1

您可以将事件绑定到动画完成。所以，当动画完成时，你的代码才会执行​​，

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

}

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

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

于 2012-05-26T06:30:13.517 回答