這篇文章主要介紹“JavaScript的回調(diào)函數(shù)是什么”，在日常操作中，相信很多人在JavaScript的回調(diào)函數(shù)是什么問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JavaScript的回調(diào)函數(shù)是什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

回調(diào)函數(shù)是每個(gè) JS 開發(fā)人員都應(yīng)該知道的概念之一。 回調(diào)用于數(shù)組，計(jì)時(shí)器函數(shù)，promise，事件處理程序等中。

在本文中，會(huì)解釋回調(diào)函數(shù)的概念。 另外，還會(huì)幫助智米們區(qū)分兩種回調(diào)：同步和異步。

1.回調(diào)函數(shù)

我們編寫一個(gè)問候的函數(shù)，首先創(chuàng)建一個(gè)函數(shù)greet(name)，該函數(shù)返回歡迎消息：

functiongreet(name){
return`Hello,${name}!`;
}

greet('小智');//=>'Hello,小智!'

如果要向一些人問候怎么做？這里，我們可以使用 array.map() 方法：

constpersons=['小智','王大冶']
constmessages=persons.map(greet)

messages//["Hello,小智!","Hello,王大冶!"]

persons.map(greet)接受person數(shù)組的每一項(xiàng)，并使用每一項(xiàng)作為調(diào)用參數(shù)來調(diào)用函數(shù)greet()：greet('小智')，greet('王大冶')。

有趣的是persons.map(greet)方法接受greet()函數(shù)作為參數(shù)。 這樣做會(huì)使reet()成為回調(diào)函數(shù)。

persons.map(greet)是一個(gè)接受另一個(gè)函數(shù)作為參數(shù)的函數(shù)，因此將其命名為高階函數(shù)。

高階函數(shù)承擔(dān)調(diào)用回調(diào)函數(shù)的全部責(zé)任，并為其提供正確的參數(shù)。

在前面的示例中，高階函數(shù)persons.map(greet)負(fù)責(zé)調(diào)用greet()回調(diào)函數(shù)，并將數(shù)組的每個(gè)項(xiàng)目作為參數(shù)：'小智'和'王大冶'。

我們可以可以自己編寫使用回調(diào)的高階函數(shù)。例如，這里有一個(gè)等價(jià)的array.map()方法

functionmap(array,callback){
constmappedArray=[];
for(constitemofarray){
mappedArray.push(
callback(item)
);
}
returnmappedArray;
}

functiongreet(name){
return`Hello,${name}!`;
}

constpersons=['小智','王大冶']

constmessages=map(persons,greet);

messages//["Hello,小智!","Hello,王大冶!"]

map(array, callback)是一個(gè)高階函數(shù)，因?yàn)樗邮芑卣{(diào)函數(shù)作為參數(shù)，然后在它的函數(shù)體內(nèi)部調(diào)用回調(diào)函數(shù):callback(item)。

2.同步回調(diào)

回調(diào)的調(diào)用方式有兩種：同步和異步回調(diào)。

同步回調(diào)是在使用回調(diào)的高階函數(shù)執(zhí)行期間執(zhí)行的。

換句話說，同步回調(diào)處于阻塞狀態(tài)：高階函數(shù)要等到回調(diào)完成執(zhí)行后才能完成其執(zhí)行。

functionmap(array,callback){
console.log('map()開始');
constmappedArray=[];
for(constitemofarray){mappedArray.push(callback(item))}
console.log('map()完成');
returnmappedArray;
}

functiongreet(name){
console.log('greet()被調(diào)用');
return`Hello,${name}!`;
}
constpersons=['小智'];

map(persons,greet);

//map()開始
//greet()被調(diào)用
//map()完成

greet()是一個(gè)同步回調(diào)函數(shù)，因?yàn)樗c高階函數(shù)map()同時(shí)執(zhí)行。

2.1 同步回調(diào)的例子

很多原生 JavaScript 類型的方法都使用同步回調(diào)。

最常用的是數(shù)組方法，例如array.map(callback)，array.forEach(callback)，array.find(callback)，array.filter(callback)，array.reduce(callback, init)：

//數(shù)組上的同步回調(diào)的示例

constpersons=['小智','前端小智']
persons.forEach(
functioncallback(name){
console.log(name);
}
);
//小智
//前端小智

constnameStartingA=persons.find(
functioncallback(name){
returnname[0].toLowerCase()==='小';
}
)
//nameStartingA//小智

constcountStartingA=persons.reduce(
functioncallback(count,name){
conststartsA=name[0].toLowerCase()==='小';
returnstartsA?count+1:count;
},
0
);

countStartingA//1

3.異步回調(diào)

異步回調(diào)在執(zhí)行高階函數(shù)之后執(zhí)行。

簡(jiǎn)而言之，異步回調(diào)是非阻塞的：高階函數(shù)無需等待回調(diào)即可完成其執(zhí)行，高階函數(shù)可確保稍后在特定事件上執(zhí)行回調(diào)。

在下面的示例中，later()函數(shù)的執(zhí)行延遲為2秒

console.log('setTimeout()開始')
setTimeout(functionlater(){
console.log('later()被調(diào)用')
},2000)
console.log('setTimeout()完成')

//setTimeout()開始
//setTimeout()完成
//later()被調(diào)用(2秒后)

3.1 異步回調(diào)的示例

計(jì)時(shí)器函數(shù)的異步回調(diào)：

setTimeout(functionlater(){
console.log('2秒過去了!');
},2000);

setInterval(functionrepeat(){
console.log('每2秒');
},2000);

DOM 事件監(jiān)聽器也是異步調(diào)用事件處理函數(shù)(回調(diào)函數(shù)的一種子類型)

constmyButton=document.getElementById('myButton');

myButton.addEventListener('click',functionhandler(){
console.log('我被點(diǎn)擊啦!');
})
//點(diǎn)擊按鈕時(shí)，才會(huì)打印'我被點(diǎn)擊啦!'

4. 異步回調(diào)函數(shù) vs 異步函數(shù)

放在函數(shù)定義之前的特殊關(guān)鍵字async創(chuàng)建一個(gè)異步函數(shù)：

asyncfunctionfetchUserNames(){
constresp=awaitfetch('https://api.github.com/users?per_page=5');
constusers=awaitresp.json();
constnames=users.map(({login})=>login);
console.log(names);
}

fetchUserNames()是異步的，因?yàn)樗那熬Y是async。 該函數(shù)await fetch('https://api.github.com/users?per_page=5')從 GitHub 前5個(gè)用戶。 然后從響應(yīng)對(duì)象中提取 JSON 數(shù)據(jù)：await resp.json()。

async函數(shù)是 Promise 的語法糖。 當(dāng)遇到表達(dá)式await <promise>時(shí)（注意，調(diào)用fetch()將返回一個(gè) promise），異步函數(shù)將暫停執(zhí)行直到該promise得以解決。

異步回調(diào)函數(shù)和異步函數(shù)是不同的術(shù)語。

異步回調(diào)函數(shù)由高階函數(shù)以非阻塞方式執(zhí)行。 但是異步函數(shù)在等待promise（await <promise>）解析時(shí)暫停其執(zhí)行。

但是，我們可以將異步函數(shù)用作異步回調(diào)！

我們異步函數(shù)fetchUserNames()設(shè)為單擊按鈕時(shí)調(diào)用的異步回調(diào)：

constbutton=document.getElementById('fetchUsersButton');

button.addEventListener('click',fetchUserNames);

總結(jié)

回調(diào)是一個(gè)可以作為參數(shù)接受并由另一個(gè)函數(shù)（高階函數(shù)）執(zhí)行的函數(shù).

有兩種回調(diào)函數(shù):同步和異步。

同步回調(diào)函數(shù)與使用回調(diào)函數(shù)的高階函數(shù)同時(shí)執(zhí)行，同步回調(diào)是阻塞的。另一方面，異步回調(diào)的執(zhí)行時(shí)間比高階函數(shù)的執(zhí)行時(shí)間晚，異步回調(diào)是非阻塞的。

總結(jié)

以上是生活随笔為你收集整理的JavaScript的回调函数是什么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。