应用开发2025-11-05 12:02:0645

有关JavaScript中回调函数的所有内容！

回调函数是有关每个 JS 开发人员都应该知道的概念之一。回调用于数组，调函计时器函数，内容promise，有关事件处理程序等中。调函

在本文中，内容会解释回调函数的有关概念。另外，调函还会帮助智米们区分两种回调：同步和异步。内容

1.回调函数

我们编写一个问候的有关函数，首先创建一个函数greet(name)，调函该函数返回欢迎消息：

function greet(name) { return `Hello,内容 ${name}!`; } greet(小智); // => Hello, 小智!

如果要向一些人问候怎么做?这里，我们可以使用 array.map() 方法：

const persons = [小智,有关王大冶] const messages = persons.map(greet) messages // ["Hello, 小智!", "Hello, 王大冶!"]

persons.map(greet)接受person数组的每一项，并使用每一项作为调用参数来调用函数greet()：greet(小智)，调函greet(王大冶)。内容

有趣的是persons.map(greet)方法接受greet()函数作为参数。这样做会使reet()成为回调函数。

persons.map(greet)是一个接受另一个函数作为参数的函数，因此将其命名为高阶函数。

高阶函数承担调用回调函数的全部责任，并为其提供正确的参数。

在前面的示例中，网站模板高阶函数persons.map(greet)负责调用greet()回调函数，并将数组的每个项目作为参数：小智和王大冶。

我们可以可以自己编写使用回调的高阶函数。例如，这里有一个等价的array.map()方法

map(array, callback)是一个高阶函数，因为它接受回调函数作为参数，然后在它的函数体内部调用回调函数:callback(item)。

2.同步回调回调的调用方式有两种：同步和异步回调。

同步回调是在使用回调的高阶函数执行期间执行的。

换句话说，同步回调处于阻塞状态：高阶函数要等到回调完成执行后才能完成其执行。

greet()是一个同步回调函数，因为它与高阶函数map()同时执行。

2.1 同步回调的例子

很多原生 JavaScript 类型的方法都使用同步回调。

最常用的是数组方法，例如array.map(callback)，array.forEach(callback)，array.find(callback)，array.filter(callback)，b2b供应网array.reduce(callback, init)：

// 数组上的同步回调的示例 const persons = [小智, 前端小智] persons.forEach( function callback(name) { console.log(name); } ); // 小智 // 前端小智 const nameStartingA = persons.find( function callback(name) { return name[0].toLowerCase() === 小; } ) // nameStartingA // 小智 const countStartingA = persons.reduce( function callback(count, name) { const startsA = name[0].toLowerCase() === 小; return startsA ? count + 1 : count; }, 0 ); countStartingA // 1

3.异步回调

异步回调在执行高阶函数之后执行。

简而言之，异步回调是非阻塞的：高阶函数无需等待回调即可完成其执行，高阶函数可确保稍后在特定事件上执行回调。

在下面的示例中，later()函数的执行延迟为2秒

console.log(setTimeout() 开始) setTimeout(function later() { console.log(later() 被调用) }, 2000) console.log(setTimeout() 完成) // setTimeout() 开始 // setTimeout() 完成 // later() 被调用(2秒后)

3.1 异步回调的示例

计时器函数的异步回调：

setTimeout(function later() { console.log(2秒过去了!); }, 2000); setInterval(function repeat() { console.log(每2秒); }, 2000);

DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)

const myButton = document.getElementById(myButton); myButton.addEventListener(click, function handler() { console.log(我被点击啦!); }) // 点击按钮时，才会打印我被点击啦!

4. 异步回调函数 vs 异步函数

放在函数定义之前的特殊关键字async创建一个异步函数：

async function fetchUserNames() { const resp = await fetch(https://api.github.com/users?per_page=5); const users = await resp.json(); const names = users.map(({ login }) => login); console.log(names); }

fetchUserNames()是异步的，因为它的前缀是async。该函数await fetch(https://api.github.com/users?per_page=5)从 GitHub 前5个用户。然后从响应对象中提取 JSON 数据：await resp.json()。

async函数是 Promise 的语法糖。当遇到表达式await 时(注意，调用fetch()将返回一个 promise)，异步函数将暂停执行直到该promise得以解决。

异步回调函数和异步函数是不同的免费源码下载术语。

异步回调函数由高阶函数以非阻塞方式执行。但是异步函数在等待promise(await )解析时暂停其执行。

但是，我们可以将异步函数用作异步回调!

我们异步函数fetchUserNames()设为单击按钮时调用的异步回调：

const button = document.getElementById(fetchUsersButton); button.addEventListener(click, fetchUserNames);

总结

回调是一个可以作为参数接受并由另一个函数(高阶函数)执行的函数.

有两种回调函数:同步和异步。

同步回调函数与使用回调函数的高阶函数同时执行，同步回调是阻塞的。另一方面，异步回调的执行时间比高阶函数的执行时间晚，异步回调是非阻塞的。

完~，感谢大家的观看，我是小智，我去刷碗啦!

作者：Shadeed 译者：前端小智来源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-variables-practices/

本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。

相关文章