這篇文章帶大家聊聊JavaScript中的回呼函數，解釋下回調函數的概念，並了解一下同步回調和非同步回調，看看怎麼區分，希望對大家有幫助！
回呼函數是每個 JS 開發人員都應該知道的概念之一。回調用於數組，計時器函數，promise，事件處理程序等。
在本文中，會解釋回呼函數的概念。另外，也會幫助智米們區分兩種回呼：同步和非同步。
我們寫一個問候的函數，首先建立一個函數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)。
回呼的呼叫方式有兩種：同步和非同步回呼。
同步回呼是在使用回呼的高階函數執行期間執行的。
換句話說，同步回呼處於阻塞狀態：高階函數要等到回呼完成執行後才能完成其執行。
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()同時執行。
很多原生 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#非同步回調在執行高階函數之後執行。
簡而言之，非同步回調是非阻塞的：高階函數無需等待回呼即可完成其執行，高階函數可確保稍後在特定事件上執行回調。
在下面的範例中，later()函數的執行延遲為2秒
console.log('setTimeout() 开始')
setTimeout(function later() {
console.log('later() 被调用')
}, 2000)
console.log('setTimeout() 完成')
// setTimeout() 开始
// setTimeout() 完成
// later() 被调用(2秒后)計時器函數的非同步回呼：
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('我被点击啦!');
})
// 点击按钮时，才会打印'我被点击啦!'#放在函數定義之前的特殊關鍵字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);
回呼是一個可以作為參數接受並由另一個函數（高階函數）執行的函數.
有兩種回呼函數:同步和非同步。
同步回呼函數與使用回呼函數的高階函數同時執行，同步回呼是阻塞的。另一方面，非同步回呼的執行時間比高階函數的執行時間晚，非同步回調是非阻塞的。
本文轉載網址：https://segmentfault.com/a/1190000041149520
更多程式相關知識，請造訪：程式設計影片！ ！
以上是帶你聊聊JavaScript中的回呼函數，區分下同步與非同步回調的詳細內容。更多資訊請關注PHP中文網其他相關文章！
