如何在 JavaScript 和 ES6 中使用回调函数

如果您熟悉编程，那么您肯定使用过函数。函数是一段代码，您可以反复使用它来执行程序中的给定任务，而不是多次编写代码。

如何在 JavaScript 和 ES6 中使用回调函数第1张

但什么是回调函数？

回调函数是 javascript 不可或缺的一部分。它们通常用于执行网络请求、响应页面相关事件以及使用来自第三方库的代码。如果您想熟练编写 JavaScript，则需要掌握回调。

如果您想了解 javaScript 回调函数的来龙去脉，包括 ES6 箭头函数，那么本文适合您。我们将通过一些示例学习如何在 JavaScript 中定义回调函数。

什么是回调函数？

一个函数可以接受一个或多个值（作为参数）。该值可以是字符串、数字、布尔值、空值、对象，甚至是另一个函数。最后一个是回调——一个函数作为参数传递给另一个函数。

这是一个例子：

1    function log(getMessage) {      
2        getMessage();    
3    }

log() 函数将 ingetMessage作为参数并getMessage()在其内部调用。这在 JavaScript 中是完全有效的，并且在的主体中的函数log()被称为“回调”函数。

回调函数的目的

JavaScript 是一种同步语言，这意味着它以顺序方式执行代码（一个接一个，从上到下）。但是，在某些情况下，代码是响应事件而执行的，而不是按顺序执行的。这称为异步编程。

回调用于在其他事情发生后立即执行代码。回调函数在主函数完全执行之前永远不会运行，因此我们可以使用它们在我们的程序中创建异步代码并控制代码执行的流程。

如何创建回调函数

在 JavaScript 中，创建回调函数的方式是将其作为参数传递给另一个函数。在函数内部，我们会在某事发生或某项任务完成后执行回调。

假设我们想在四秒后在终端控制台上打印一条消息，我们可以通过向该函数传递一个回调函数来实现setTimeout()：

1    const message = function() {      
2        console.log("This message is shown after 3 seconds");    
3    }    
4    
5    setTimeout(message, 3000);

setTimeout是一个内置函数，用于在指定的时间段（以毫秒为单位）后执行代码。在这里，我们要setTimeout()在四秒后执行我们的消息函数（并记录包含的消息）。

在此示例中，我们使用名称定义了函数。但是，您也可以将函数定义为“匿名函数”。

作为匿名函数的回调

或者，我们可以直接在另一个函数中定义一个函数，而不是在其他地方定义它并调用它。它看起来像这样：

1    setTimeout(function() {      
2        console.log("This message is shown after 3 seconds");    
3    }, 4000);

在这种情况下，回调函数是一个匿名函数（a nameless function）。上面的代码在这里运行与上一节完全相同，但是使用匿名函数使代码更加简洁。

作为 ES6 箭头函数的回调

箭头函数是作为 ECMAScript 2016 (ES6) 规范的一部分引入 JavaScript 的。大多数主流浏览器和跨版本目前都支持箭头函数语法。

我们可以编写与箭头函数相同的回调函数：

1    setTimeout(() => {     
2        console.log("This message is shown after 3 seconds");    
3    }, 3000);

这个和匿名函数的唯一区别是这里我们function用箭头符号代替了关键字。代码运行与前面示例中的代码相同。

如果函数的内容很短，您还可以将箭头函数重构为单行函数：

setTimeout(() => console.log("Just 3 seconds") , 3000);

接下来，事件。

事件呢？

在前面的例子中，我们在四秒后执行了回调setTimeout()。虽然这是回调的常见用例，但绝不是唯一的用例。

回调函数通常用于响应网页事件，例如单击按钮、将鼠标悬停在元素上或提交表单。

例如，考虑以下按钮：

<button id="callback-btn">Click here</button>

假设我们要在用户单击按钮时记录一条消息：

1   document.queryselector("#callback-btn")    
2        .addeventListener("click", function() {        
3          console.log("User has clicked on the button!");    
4    });

首先，我们使用该querySelector()方法通过其 ID 属性选择按钮。然后我们将一个“点击”事件监听器附加到该元素，传入一个匿名回调函数作为第二个参数。在函数内部，我们只需在单击按钮后在控制台上记录一条消息。