[[375768]]

回調函數是每個 JS 開發(fā)人員都應該知道的概念之一?；卣{用于數組，計時器函數，promise，事件處理程序等中。

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

1.回調函數

我們編寫一個問候的函數，首先創(chuàng)建一個函數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.同步回調回調的調用方式有兩種：同步和異步回調。

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

換句話說，同步回調處于阻塞狀態(tài)：高階函數要等到回調完成執(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() 被調用 '); 
  return `Hello, ${name}!`; 
} 
const persons = ['小智']; 
 
map(persons, greet); 
 
// map() 開始 
// greet() 被調用  
// map() 完成 

greet()是一個同步回調函數，因為它與高階函數map()同時執(zhí)行。

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

異步回調在執(zhí)行高階函數之后執(zhí)行。

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

在下面的示例中，later()函數的執(zhí)行延遲為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 事件監(jiān)聽器也是異步調用事件處理函數(回調函數的一種子類型)

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

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

放在函數定義之前的特殊關鍵字async創(chuàng)建一個異步函數：

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 時(注意，調用fetch()將返回一個 promise)，異步函數將暫停執(zhí)行直到該promise得以解決。

異步回調函數和異步函數是不同的術語。

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

但是，我們可以將異步函數用作異步回調!

我們異步函數fetchUserNames()設為單擊按鈕時調用的異步回調：

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

總結

回調是一個可以作為參數接受并由另一個函數(高階函數)執(zhí)行的函數.

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

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

完~，感謝大家的觀看，我是小智，我去刷碗啦!

作者：Shadeed 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-variables-practices/

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。