大前端零基础入门到就业:进入学习
回调函数是每个 JS 开发人员都应该知道的概念之一。 回调用于数组,计时器函数,promise,事件处理程序等中。
在本文中,会解释回调函数的概念。 另外,还会帮助智米们区分两种回调:同步和异步。
我们编写一个问候的函数,首先创建一个函数greet(name)
,该函数返回欢迎消息:
1 2 3 4 5 |
|
如果要向一些人问候怎么做?这里,我们可以使用 array.map()
方法:
1 2 3 4 |
|
persons.map(greet)
接受person
数组的每一项,并使用每一项作为调用参数来调用函数greet()
:greet('小智')
,greet('王大冶')
。
有趣的是persons.map(greet)
方法接受greet()
函数作为参数。 这样做会使reet()
成为回调函数。
persons.map(greet)
是一个接受另一个函数作为参数的函数,因此将其命名为高阶函数。
高阶函数承担调用回调函数的全部责任,并为其提供正确的参数。
在前面的示例中,高阶函数persons.map(greet)
负责调用greet()
回调函数,并将数组的每个项目作为参数:'小智'
和'王大冶'
。
我们可以可以自己编写使用回调的高阶函数。例如,这里有一个等价的array.map()
方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
map(array, callback)
是一个高阶函数,因为它接受回调函数作为参数,然后在它的函数体内部调用回调函数:callback(item)
。
回调的调用方式有两种:同步和异步回调。
同步回调是在使用回调的高阶函数执行期间执行的。
换句话说,同步回调处于阻塞状态:高阶函数要等到回调完成执行后才能完成其执行。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
greet()
是一个同步回调函数,因为它与高阶函数map()
同时执行。
很多原生 JavaScript 类型的方法都使用同步回调。
最常用的是数组方法,例如array.map(callback)
,array.forEach(callback)
,array.find(callback)
,array.filter(callback)
,array.reduce(callback, init)
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
异步回调在执行高阶函数之后执行。
简而言之,异步回调是非阻塞的:高阶函数无需等待回调即可完成其执行,高阶函数可确保稍后在特定事件上执行回调。
在下面的示例中,later()
函数的执行延迟为2秒
1 2 3 4 5 6 7 8 9 |
|
计时器函数的异步回调:
1 2 3 4 5 6 7 |
|
DOM 事件监听器也是异步调用事件处理函数(回调函数的一种子类型)
1 2 3 4 5 6 |
|
放在函数定义之前的特殊关键字async
创建一个异步函数:
1 2 3 4 5 6 |
|
fetchUserNames()
是异步的,因为它的前缀是async
。 该函数await fetch('https://api.github.com/users?per_page=5')
从 GitHub 前5个用户。 然后从响应对象中提取 JSON 数据:await resp.json()
。
async
函数是 Promise
的语法糖。 当遇到表达式await <promise>
时(注意,调用fetch()
将返回一个 promise),异步函数将暂停执行直到该promise
得以解决。
异步回调函数和异步函数是不同的术语。
异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise(await <promise>
)解析时暂停其执行。
但是,我们可以将异步函数用作异步回调!
我们异步函数fetchUserNames()
设为单击按钮时调用的异步回调:
1 2 3 |
|
回调是一个可以作为参数接受并由另一个函数(高阶函数)执行的函数.
有两种回调函数:同步和异步。
同步回调函数与使用回调函数的高阶函数同时执行,同步回调是阻塞的。另一方面,异步回调的执行时间比高阶函数的执行时间晚,异步回调是非阻塞的。
本文转载地址:https://segmentfault.com/a/1190000041149520
更多编程相关知识,请访问:编程视频!!
以上就是带你聊聊JavaScript中的回调函数,区分下同步和异步回调的详细内容,更多请关注php中文网其它相关文章!
联系客服