Question

我有一个JS的例行程序( 用户触发) 需要一些时间才能完成。虽然例行程序正在运行, 我要在屏幕上显示进度覆盖。以下是调用例行程序的代码( 这是响应点击事件而调用 ) :

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

类切换会触发 obcity 和 visibility 的更改(随转换而变化)。

班级改变本身运作良好;第一种在慢程序之前执行,第二种则在所有其他情况下执行。

The issue is that the visual appearance of #progressOverlay doesn t change until after myBigRoutine() finishes.
The result is that the progress overlay flashes on screen for a split second and then is immediately hidden again (all with no animation)

是否有办法强制在大型 JavaScript 常规之前(或更好,

Answer 1

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

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

}

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

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

Answer 2

您的 < code> myBigRoutine () 函数应该以非同步方式被调用。

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

150是一个神奇数字,这意味着超时延迟以毫秒计。它可以是任何小数字。

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

友情链接