您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript中回調(diào)函數(shù)及區(qū)分下同步和異步回調(diào)的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
我們編寫(xiě)一個(gè)問(wèn)候的函數(shù),首先創(chuàng)建一個(gè)函數(shù)greet(name)
,該函數(shù)返回歡迎消息:
function greet(name) { return `Hello, ${name}!`; } greet('小智'); // => 'Hello, 小智!'
如果要向一些人問(wèn)候怎么做?這里,我們可以使用 array.map()
方法:
const persons = ['小智', '王大冶'] const messages = persons.map(greet) messages // ["Hello, 小智!", "Hello, 王大冶!"]
persons.map(greet)
接受person
數(shù)組的每一項(xiàng),并使用每一項(xiàng)作為調(diào)用參數(shù)來(lái)調(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ù):'小智'
和'王大冶'
。
我們可以可以自己編寫(xiě)使用回調(diào)的高階函數(shù)。例如,這里有一個(gè)等價(jià)的array.map()
方法
function map(array, callback) { const mappedArray = []; for (const item of array) { mappedArray.push( callback(item) ); } return mappedArray; } function greet(name) { return `Hello, ${name}!`; } const persons = ['小智', '王大冶'] const messages = 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)
。
回調(diào)的調(diào)用方式有兩種:同步和異步回調(diào)。
同步回調(diào)是在使用回調(diào)的高階函數(shù)執(zhí)行期間執(zhí)行的。
換句話說(shuō),同步回調(diào)處于阻塞狀態(tài):高階函數(shù)要等到回調(diào)完成執(zhí)行后才能完成其執(zhí)行。
function map(array, callback) { console.log('map() 開(kāi)始'); const mappedArray = []; for (const item of array) { mappedArray.push(callback(item)) } console.log('map() 完成'); return mappedArray; } function greet(name) { console.log('greet() 被調(diào)用 '); return `Hello, ${name}!`; } const persons = ['小智']; map(persons, greet); // map() 開(kāi)始 // greet() 被調(diào)用 // map() 完成
greet()
是一個(gè)同步回調(diào)函數(shù),因?yàn)樗c高階函數(shù)map()
同時(shí)執(zhí)行。
很多原生 JavaScript 類型的方法都使用同步回調(diào)。
最常用的是數(shù)組方法,例如array.map(callback)
,array.forEach(callback)
,array.find(callback)
,array.filter(callback)
,array.reduce(callback, init)
:
// 數(shù)組上的同步回調(diào)的示例 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
異步回調(diào)在執(zhí)行高階函數(shù)之后執(zhí)行。
簡(jiǎn)而言之,異步回調(diào)是非阻塞的:高階函數(shù)無(wú)需等待回調(diào)即可完成其執(zhí)行,高階函數(shù)可確保稍后在特定事件上執(zhí)行回調(diào)。
在下面的示例中,later()
函數(shù)的執(zhí)行延遲為2秒
console.log('setTimeout() 開(kāi)始') setTimeout(function later() { console.log('later() 被調(diào)用') }, 2000) console.log('setTimeout() 完成') // setTimeout() 開(kāi)始 // setTimeout() 完成 // later() 被調(diào)用(2秒后)
計(jì)時(shí)器函數(shù)的異步回調(diào):
setTimeout(function later() { console.log('2秒過(guò)去了!'); }, 2000); setInterval(function repeat() { console.log('每2秒'); }, 2000);
DOM 事件監(jiān)聽(tīng)器也是異步調(diào)用事件處理函數(shù)(回調(diào)函數(shù)的一種子類型)
const myButton = document.getElementById('myButton'); myButton.addEventListener('click', function handler() { console.log('我被點(diǎn)擊啦!'); }) // 點(diǎn)擊按鈕時(shí),才會(huì)打印'我被點(diǎn)擊啦!'
放在函數(shù)定義之前的特殊關(guān)鍵字async
創(chuàng)建一個(gè)異步函數(shù):
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()
是異步的,因?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
的語(yǔ)法糖。 當(dāng)遇到表達(dá)式await <promise>
時(shí)(注意,調(diào)用fetch()
將返回一個(gè) promise),異步函數(shù)將暫停執(zhí)行直到該promise
得以解決。
異步回調(diào)函數(shù)和異步函數(shù)是不同的術(shù)語(yǔ)。
異步回調(diào)函數(shù)由高階函數(shù)以非阻塞方式執(zhí)行。 但是異步函數(shù)在等待promise(await <promise>
)解析時(shí)暫停其執(zhí)行。
但是,我們可以將異步函數(shù)用作異步回調(diào)!
我們異步函數(shù)fetchUserNames()
設(shè)為單擊按鈕時(shí)調(diào)用的異步回調(diào):
const button = document.getElementById('fetchUsersButton'); button.addEventListener('click', fetchUserNames);
以上是“JavaScript中回調(diào)函數(shù)及區(qū)分下同步和異步回調(diào)的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。