Question

我有一些代码，按照我希望它们执行的顺序执行函数的顺序。然而，它们似乎在同一时间（它们可能在彼此之间的微秒内开始顺序）。

问题是某些功能包括动画。如何使它在下一个函数完成之前不执行下一个函数???

以下是我的一些代码。我创建了一个回调链，认为它将是解决方案，但实际上并非如此。函数本身调用jQuery动画。我猜我需要使用jQuery中的某种类型的notofication告诉我什么时候动画完成。无论如何，非常感谢任何建议！

show_loader(0, function() {
    close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
        open_box($target_open, event.value, '.wide-col', function() {
            hide_loader(function() {
                scroll_to_content($target_open, function() {
                });
            });
        });
    });
});

确切地说，我希望在完成所有先前的操作之后执行scroll_to_content（）函数。目前，它与其他所有内容同时执行，因此我的页面滚动完全关闭，因为我的内容大小在scroll_to_content（）完成后继续更改。

Answer 1

回调链基本上就是解决方案，但我怀疑你在调用jQuery时没有正确地回调你的回调。 $.animate(...)有一个可选的complete回调 - 您希望在初始动画结束后传递应该执行的函数。 jQuery UI中的所有Effects都应该有一个类似的可选参数。

您可以自己使用类似的模式来链接事件处理程序，例如：

function handler(event, callback) {
  // do some work
  // ...
  callback();
}

这种用于链接函数评估的策略称为continuation-passing style，在很多情况下都很方便。但要小心使用它，因为许多人发现阅读比传统的顺序实现更令人困惑。

Answer 2

http://api.jquery.com/queue/

抱歉，我没有足够的时间详细介绍，但正如之前的评论者所说，排队是你想要专注于解决这个问题的。

Answer 3

你有3个选择：

1-将您的动画拆分为多个链式动画（）调用。这是example为您澄清的。

2-按照@dml发布的答案。

3-尝试使用此插件在您的通话之间添加延迟（不知道是否可以修复此方案，请尝试一下） http://www.evanbyrne.com/article/jquery-delay-plugin

Javascript：如何在function1完全完成后才使function2执行？

3 个答案: