#12：回调函数

大家最喜欢的：概念视频时间！回调函数是 JavaScript 中一个重要的概念。它们是在某个动作完成运行后被调用的函数。它们为我们的代码提供了结构和时间安排。

以我们上个视频中使用的动画为例。动画需要时间才能运行。如果想在动画结束后立即发生其他事情，该怎么办？是否必须使用与动画时长相同的 setTimeout？不需要。jQuery 为我们提供了专门用于此目的的回调函数。

它们通常是我们传递给方法的额外参数。在动画的情况下，我们将一个函数作为最后一个参数传递。这就是回调函数，它将在动画完成后被调用。

$("#element").animate({
  // stuff to animate
}, function() {
  // callback function
});

这看起来可能有点奇怪，但本质上我们只是在做

.animate(a, b)

其中 a 是一个属性和值的集合，b 是一个回调函数。

但我们从上一个视频中知道，动画也可以接受一个指定动画持续时间的定时参数。这个参数放在哪里？它是一个可选参数，就像回调函数一样。如果想使用它，我们会把它放在中间，所以本质上是

.animate(propertiesObject, duration, callback);

还有一个可选参数，我们可以传递一个字符串来指定缓动值。

.animate(propertiesObject, duration, easing, callback);

jQuery 恰好很酷也很聪明，可以处理这些可选参数。如果省略中间两个参数，只传递回调函数，它可以识别出你传递的是一个函数，而不是一个数字或字符串，所以它知道你指的是回调函数。你不需要传递任何虚假的值。这仅仅是良好的 API 设计！

当你查看jQuery 文档时，它们会这样显示

.animate( properties [, duration ] [, easing ] [, complete ] )

然后在后面解释预期类型。

但无论如何，回到回调函数。你可以嵌套得很深。想象一下在回调函数中放置另一个动画，并且该动画有自己的回调函数。这是完全合理的，因为你可能想要做一个多步骤的动画。你只需要保持条理清晰。

查看 CodePen 上 Chris Coyier 的作品 450c5810be27a9a8946cb8012cbd1213(@chriscoyier）。

这里我们只是使用动画作为示例。也许回调函数更常见的用法是 Ajax。Ajax 是浏览器在不刷新页面的情况下调用另一个资源的情况。这可能需要完全未知的时间。这取决于带宽、延迟、文件大小、错误条件以及各种其他因素。在获得任何回复或其他更多信息之前，你可能无法对该 Ajax 请求做任何事情。回调函数非常适合这种情况，我们将在后面详细介绍。