Javascript:如何让 function2 仅在 function1 完全完成后才执行？

Question

我有一些代码，其中函数的顺序按照我希望它们执行的顺序排列。然而，它们似乎同时发生(它们大概在彼此相隔几微秒的时间内按顺序开始)。

问题是某些功能包含动画。如何才能使下一个函数在前一个函数完全完成之前不执行？？？

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

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 回调 - 您希望在其中传递初始动画完成后应执行的函数。所有Effects在 jQuery UI 中应该有一个类似的可选参数。

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

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

这种链接函数求值的策略称为 continuation-passing style并且在很多情况下都很方便。但是，使用它时要小心，因为许多人发现它比传统的顺序实现更难以阅读。