javascript - JS/jQuery : Wait for function with animations to be finished

Question

目前，当用户单击按钮时，会执行多个 JavaScript 函数。因为每个函数都会在网站上执行一些动画(更多信息可以在第二条评论中找到)，所以我必须一个接一个地执行它们，这样 jQuery 就不会搞砸了，因为它在一个甚至不存在的元素上启动了一个动画尚未加载/显示。

我当前的解决方案是使用 setTimeout 调用每个函数，然后调用前一个函数，如下所示:

window.setTimeout(functionA,250);
window.setTimeout(functionB,500);

这在 Chrome 中效果很好，但在 Firefox 中有时执行速度仍然太快。因此，我希望通过告诉 Javascript 仅在前一个函数完全完成时执行下一个函数来修复此解决方法。

我已经阅读过有关添加回调的内容 - 但我有很多函数要调用。我真的必须为每个函数添加回调才能实现我想要的吗？

提前非常感谢。

Answer 1

如果您使用 jQuery 动画，请查看 jQuery.Deferred。它是所有动画函数(如 fadeIn()、slideDown()、animate())的结果。

您可以像这样组合几个延迟:

var anim1 = $('.sth').animate({left:100});
var anim2 = $('.sth2').fadeOut();
var anim3 = $('.sth4').slideDown();
$.when(anim1, anim2, anim3).then(function(){
    console.log('Animations are ready');
})