這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中回調(diào)函數(shù)的內(nèi)容有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、蕉嶺網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

回調(diào)函數(shù)的概念：同步和異步。

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

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

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

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

const persons = ['小智', '王大冶'] const messages = 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ù)。這樣做會使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()方法

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)。

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í)行。

function map(array, callback) {   console.log('map() 開始');   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() 開始 // 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)的示例  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.異步回調(diào)

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

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

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

console.log('setTimeout() 開始') setTimeout(function later() {   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(function later() {   console.log('2秒過去了!'); }, 2000);  setInterval(function repeat() {   console.log('每2秒'); }, 2000);

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

const myButton = document.getElementById('myButton');  myButton.addEventListener('click', function handler() {   console.log('我被點(diǎn)擊啦!'); }) // 點(diǎn)擊按鈕時(shí)，才會打印'我被點(diǎn)擊啦!'

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

放在函數(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)對象中提取 JSON  數(shù)據(jù)：await resp.json()。

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

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

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

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

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

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

回調(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)是非阻塞的。

關(guān)于JavaScript中回調(diào)函數(shù)的內(nèi)容有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁名稱：JavaScript中回調(diào)函數(shù)的內(nèi)容有哪些
轉(zhuǎn)載來于：http://chinadenli.net/article2/ggjpoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、虛擬主機(jī)、企業(yè)網(wǎng)站制作、小程序開發(fā)、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)