什么是回调函数Callback

简单的理解：回调函数是在另一个函数执行完毕后执行的函数 - 因此名称为'call back'。

复杂的理解：在JavaScript中，函数是对象。因此，函数可以将函数作为参数，并且可以由其他函数返回。执行此操作的函数称为高阶函数。任何作为参数传递的函数都称为回调函数。

为什么需要回调函数Callback

一个非常重要的原因 - JavaScript是一种事件驱动的语言。这意味着，在继续之前，JavaScript不会等待响应，而是在侦听其他事件时继续执行。

看一个基本的例子：

function first(){ console.log(1);}function second(){ console.log(2);}first();second();

正如您所料，首先执行函数，然后执行第二个函数 - 将以下内容记录到控制台：

// 1// 2

但是如果函数首先包含某种无法立即执行的代码呢？例如，我们必须发送请求然后等待响应的API请求？为了模拟这个动作，我们将使用setTimeout，这是一个在一段时间后调用函数的JavaScript函数。我们将函数延迟500毫秒来模拟API请求。我们的新代码如下所示：

function first(){ // Simulate a code delay setTimeout( function(){ console.log(1); }, 500 );}function second(){ console.log(2);}first();second();

了解setTimeout()现在如何工作并不重要。重要的是你看到我们已经移动了我们的console.log(1);在我们的500毫秒延迟之内。那么当我们调用函数时会发生什么呢？

first();second();// 2// 1

即使我们首先调用first()函数，我们也会在second()函数之后注销该函数的结果。并不是JavaScript没有按照我们想要的顺序执行我们的函数，而是在继续执行second()之前，JavaScript没有等待来自first()的响应。

创建一个回调函数Callback

function doHomework(subject) { alert(`Starting my ${subject} homework.`);}

上面，我们创建了doHomework函数。我们的函数接受一个变量，通过在控制台中键入以下内容来调用您的函数：

doHomework('math');// Alerts: Starting my math homework.

现在让我们添加回调 - 作为doHomework()函数中的最后一个参数，我们可以在回调中传递。然后在我们调用doHomework()的第二个参数中定义回调函数。

function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`); callback();}doHomework('math', function() { alert('Finished my homework');});

但是回调函数并不总是必须在函数调用中定义。可以在我们的代码中的其他位置定义

function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`); callback();}function alertFinished(){ alert('Finished my homework');}doHomework('math', alertFinished);

结果是一样的