JavaScript的回调函数是什么
這篇文章主要介紹“JavaScript的回調函數是什么”,在日常操作中,相信很多人在JavaScript的回調函數是什么問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript的回調函數是什么”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
回調函數是每個 JS 開發人員都應該知道的概念之一。 回調用于數組,計時器函數,promise,事件處理程序等中。
在本文中,會解釋回調函數的概念。 另外,還會幫助智米們區分兩種回調:同步和異步。
1.回調函數
我們編寫一個問候的函數,首先創建一個函數greet(name),該函數返回歡迎消息:
functiongreet(name){
return`Hello,${name}!`;
}
greet('小智');//=>'Hello,小智!'
如果要向一些人問候怎么做?這里,我們可以使用 array.map() 方法:
constpersons=['小智','王大冶'] constmessages=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()方法
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)是一個高階函數,因為它接受回調函數作為參數,然后在它的函數體內部調用回調函數:callback(item)。
2.同步回調
回調的調用方式有兩種:同步和異步回調。
同步回調是在使用回調的高階函數執行期間執行的。
換句話說,同步回調處于阻塞狀態:高階函數要等到回調完成執行后才能完成其執行。
functionmap(array,callback){
console.log('map()開始');
constmappedArray=[];
for(constitemofarray){mappedArray.push(callback(item))}
console.log('map()完成');
returnmappedArray;
}
functiongreet(name){
console.log('greet()被調用');
return`Hello,${name}!`;
}
constpersons=['小智'];
map(persons,greet);
//map()開始
//greet()被調用
//map()完成
greet()是一個同步回調函數,因為它與高階函數map()同時執行。
2.1 同步回調的例子
很多原生 JavaScript 類型的方法都使用同步回調。
最常用的是數組方法,例如array.map(callback),array.forEach(callback),array.find(callback),array.filter(callback),array.reduce(callback, init):
//數組上的同步回調的示例
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.異步回調
異步回調在執行高階函數之后執行。
簡而言之,異步回調是非阻塞的:高階函數無需等待回調即可完成其執行,高階函數可確保稍后在特定事件上執行回調。
在下面的示例中,later()函數的執行延遲為2秒
console.log('setTimeout()開始')
setTimeout(functionlater(){
console.log('later()被調用')
},2000)
console.log('setTimeout()完成')
//setTimeout()開始
//setTimeout()完成
//later()被調用(2秒后)
3.1 異步回調的示例
計時器函數的異步回調:
setTimeout(functionlater(){
console.log('2秒過去了!');
},2000);
setInterval(functionrepeat(){
console.log('每2秒');
},2000);
DOM 事件監聽器也是異步調用事件處理函數(回調函數的一種子類型)
constmyButton=document.getElementById('myButton');
myButton.addEventListener('click',functionhandler(){
console.log('我被點擊啦!');
})
//點擊按鈕時,才會打印'我被點擊啦!'
4. 異步回調函數 vs 異步函數
放在函數定義之前的特殊關鍵字async創建一個異步函數:
asyncfunctionfetchUserNames(){
constresp=awaitfetch('https://api.github.com/users?per_page=5');
constusers=awaitresp.json();
constnames=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 <promise>時(注意,調用fetch()將返回一個 promise),異步函數將暫停執行直到該promise得以解決。
異步回調函數和異步函數是不同的術語。
異步回調函數由高階函數以非阻塞方式執行。 但是異步函數在等待promise(await <promise>)解析時暫停其執行。
但是,我們可以將異步函數用作異步回調!
我們異步函數fetchUserNames()設為單擊按鈕時調用的異步回調:
constbutton=document.getElementById('fetchUsersButton');
button.addEventListener('click',fetchUserNames);
總結
回調是一個可以作為參數接受并由另一個函數(高階函數)執行的函數.
有兩種回調函數:同步和異步。
同步回調函數與使用回調函數的高階函數同時執行,同步回調是阻塞的。另一方面,異步回調的執行時間比高階函數的執行時間晚,異步回調是非阻塞的。
總結
以上是生活随笔為你收集整理的JavaScript的回调函数是什么的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python def函数报错详解_Pyt
- 下一篇: WordPress实现彩色标签云的方法