什么是回调函数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);
结果是一样的