详解 JavaScript 回调函数

如果你了解编程，你应该已经知道函数的功能以及如何使用函数。但是，什么是回调函数呢？回调函数是 JavaScript 的一个重要部分。如果你理解了它如何运行，你就能更擅长编写 JavaScript。

在这篇文章里，我会通过一些例子帮助你理解什么是回调函数，如何在 JavaScript 中使用它们。

什么是回调函数？

在 JavaScript 中，函数即对象。我们可以将对象作为参数传递给函数吗？答案是“可以”。

所以，我们可以将函数作为参数传递给其他函数，在外部函数中调用它。听起来有点复杂？我们看一下下面的例子：

function print(callback) {  
    callback();
}

print( ) 函数将另一个函数作为参数，并在函数体内部调用它。在 JavaScript 里，我们叫它“回调”。所以，被传递给另一个函数作为参数的函数叫作回调函数。

JavaScript 按从上到下的顺序运行代码。但是，在有些情况下，必须在某些情况发生之后，代码才能运行（或者说必须运行），这就不是按顺序运行了。这是异步编程。

回调函数确保：函数在某个任务完成之前不运行，在任务完成之后立即运行。它帮助我们编写异步 JavaScript 代码，避免问题和错误。

在 JavaScript 里创建回调函数的方法是将它作为参数传递给另一个函数，然后当某个任务完成之后，立即调用它。

我们通过一个简单的例子来理解上面的内容。我们想在控制台打印一条消息（message），它在 3 秒之后显示。

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

JavaScript 有一个内建方法叫作 “setTimeout”，它会在给定的时间段（以毫秒为单位）后调用函数或计算表达式。因此，在这里，经过 3 秒后将调用 message 函数（1 秒= 1000 毫秒）。

换句话说，message 函数是在发生某事之后（在本示例中为 3 秒之后），而不是在此之前被调用。因此，message 函数就是一个回调函数

此外，我们可以直接在另一个函数内定义一个函数，而不是调用它，比如：

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

我们可以看到，这里的回调函数没有名称。在 JavaScript 里，一个没有名称的函数叫作“匿名函数”。这个例子和上面的例子执行的任务一样。

你也可以用 ES6 箭头函数写回调函数。箭头函数是 JavaScript 里的一种新的函数形式。

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

JavaScript 是一种事件驱动的编程语言。我们还将回调函数用于事件声明。例如，假设我们希望用户单击按钮：

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

这次，只有当用户单击按钮时，我们才会在控制台上看到一条消息：

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

因此，在这里我们首先通过 ID 选择按钮，然后使用 addEventListener 方法添加一个事件监听器。它有 2 个参数。第一个是其类型，即“click（单击）”，第二个参数是回调函数，该函数记录单击按钮时的消息。

所以，回调函数也用于 JavaScript 中的事件声明。

回调函数在 JavaScript 编程中比较常用。我希望这篇文章可以帮助你理解它是如何运行的，以及如何更好地使用它。接下来，可以学习另一个主题：JavaScript Promises。

谢谢阅读！