什么是JavaScript中的回调函数?

148 阅读5分钟

如果你是一个程序员,你可能听说过函数,它是一组执行一个动作并返回一个输出的语句,但什么是回调函数?

回调函数是javascript中一个极其重要的概念,它被广泛用于承诺、事件监听器、数组等等。

我们将在本教程中详细介绍什么是回调函数,以及如何在JavaScript中使用它们,同时我们还将谈论同步和异步的回调函数。为了对回调函数有一个清晰而深刻的概念,我们还将实现一些例子。

回调函数

回调函数是一个首先作为参数传递给其他函数的函数,需要在该函数定义中所写的语句之后执行,顾名思义,它是在函数的后面运行的。用简单的话来说,回调函数是在当前效果处理完毕后执行的。

在JavaScript中编写回调函数的语法

基本的语法是

function nameFunc(callbackFunc) {
   callbackFunc();
}

这是一个**"nameFunc() "函数**,以**"callbackFunc() "函数**为参数。callbackFunc() "函数是在 "nameFunc() "函数中调用的,所以它确实是一个回调函数。

例子1

假设我们想在2秒后在console.log上记录一条信息。

function message() {
   console.log("Hello world after 2 seconds");
}

setTimeout(message, 2000);

setTimeout()函数是JavaScript的一个内置方法,它接收一个定时器和一个回调函数作为参数。现在,消息函数(一个回调函数)只有在定时器过期时才会被调用并执行。


在上面的代码中,函数message()被作为参数传递,并在2000毫秒(2秒)后被调用。现在把这与回调函数联系起来,message()函数在2秒后被调用。在这2秒之前,它并没有被执行。因此,它是一个回调函数。

需要回调函数吗?

你一定在想为什么我们需要回调函数。答案很简单。JavaScript是一种顺序的或单线程的语言,这意味着它是按顺序逐行执行的。

JavaScript在进入下一行之前不会等待响应。它将继续执行并监听其他事件或代码行。

比如说。

例2

假设我们要从两个不同的函数中记录1和2到控制台。

function firstMessage(){
   console.log("1");
}
function secondMessage() {
   console.log("2");
}

firstMessage();
secondMessage();

输出。

1  
2

正如预期的那样,函数firstMessage()首先被执行,然后执行secondMessage()函数

例3

假设firstMessage()方法包括一个从服务器上获取数据的API请求。我们必须等待服务器的回答/回复,因此让我们再一次利用内置的setTimeout方法。

这一次我们将延迟3秒来看看我们如何请求API获取请求。

function firstMessage(){
   //timeout function for delaying request
   setTimeout( function(){
     console.log("1");
   }, 3000);
 }
function secondMessage() {
   console.log("2");
}

firstMessage();
secondMessage();

在这段代码中,我们只是把console.log("1"); 移到了 setTimeout()函数里面。

现在真正有趣的是,当你运行这段代码时,你会看到控制台中会首先显示2。

3秒后,1将被显示出来。

我们可以看到,首先调用了 firstMessage()函数,然后调用了secondMessage()函数。然而,我们无法在我们调用函数的顺序中看到结果。

这并不是说JavaScript没有按顺序返回我们的代码,只是JavaScript没有等待 firstMessage()函数完全执行就开始执行secondMessage()函数

这个例子放在这里完全是为了告诉你为什么我们需要回调函数。回调函数让我们确保一些代码在我们所需的代码被执行之前不会执行。

回调函数类型

现在我们已经看到了什么是回调,如何使用,以及为什么它们很重要,让我们看看回调函数的两种类型。

同步回调函数

同步回调函数与使用回调函数的高阶函数同时运行/执行,主要是阻塞性的;它完成任务后将控制权交给另一个函数或一行代码。

这是有好处的,因为假设你正在从一个API中获取项目。一旦你从API获取了一些数据,你希望你的页面能够加载。除非从API获取响应,否则整个网站都要等待。

上面的例子2是同步函数,因为它是逐行执行的,一旦第一个函数被执行,控制权就交给了第二个函数 ,即secondMessage()函数。

异步回调函数

异步与同步完全相反,因为它与函数的调用者和回调函数平行工作。异步函数是无阻塞的,因为它们比高阶函数晚一步运行或执行。

上面提供的例子3是一个异步回调函数,我们调用了 firstMessage()函数,但它等待了两秒钟。在这两秒钟内,它把控制权交还给了对方,然后执行了secondMessage()函数。一旦三秒的时间到了,firstMessage()函数又开始执行。

结论

回调函数是一个首先作为参数提供给其他函数的函数,需要在该函数定义中写的语句之后执行。我们在这篇文章中学习了什么是回调函数,如何在JavaScript中使用它们,以及为什么回调函数很重要,还有两种类型的回调函数是什么。