有關JavaScript中回調函數的全部內容！

做者：Shadeed
譯者：前端小智
來源：dmitripavlutin

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

回調函數是每一個 JS 開發人員都應該知道的概念之一。 回調用於數組，計時器函數，promise，事件處理程序等中。

在本文中，會解釋回調函數的概念。 另外，還會幫助智米們區分兩種回調：同步和異步。

1.回調函數

咱們編寫一個問候的函數，首先建立一個函數greet(name)，該函數返回歡迎消息：

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

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

若是要向一些人問候怎麼作？這裏，咱們可使用 array.map() 方法：

const persons = ['小智', '王大冶']
const messages = 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()方法

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)是一個高階函數，由於它接受回調函數做爲參數，而後在它的函數體內部調用回調函數:callback(item)。

2.同步回調

回調的調用方式有兩種：同步和異步回調。

同步回調是在使用回調的高階函數執行期間執行的。

換句話說，同步回調處於阻塞狀態：高階函數要等到回調完成執行後才能完成其執行。

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() 被調用 ');
  return `Hello, ${name}!`;
}
const persons = ['小智'];

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

// 數組上的同步回調的示例

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.異步回調

異步回調在執行高階函數以後執行。

簡而言之，異步回調是非阻塞的：高階函數無需等待回調便可完成其執行，高階函數可確保稍後在特定事件上執行回調。

在下面的示例中，later()函數的執行延遲爲2秒

console.log('setTimeout() 開始')
setTimeout(function later() {
  console.log('later() 被調用')
}, 2000)
console.log('setTimeout() 完成')

// setTimeout() 開始
// setTimeout() 完成
// later() 被調用(2秒後)

3.1 異步回調的示例

計時器函數的異步回調：

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

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

DOM 事件監聽器也是異步調用事件處理函數(回調函數的一種子類型)

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被點擊啦!');
})
// 點擊按鈕時，纔會打印'我被點擊啦!'

4. 異步回調函數 vs 異步函數

放在函數定義以前的特殊關鍵字async建立一個異步函數：

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()是異步的，由於它的前綴是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()設爲單擊按鈕時調用的異步回調：

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

總結

回調是一個能夠做爲參數接受並由另外一個函數（高階函數）執行的函數.

有兩種回調函數:同步和異步。

同步回調函數與使用回調函數的高階函數同時執行，同步回調是阻塞的。另外一方面，異步回調的執行時間比高階函數的執行時間晚，異步回調是非阻塞的。

完~，感謝你們的觀看，我是小智，我去刷碗啦！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/ja...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。