小編給大家分享一下JavaScript中回調(diào)函數(shù)及區(qū)分下同步和異步回調(diào)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)專注于泌陽網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供泌陽營銷型網(wǎng)站建設(shè)，泌陽網(wǎng)站制作、泌陽網(wǎng)頁設(shè)計、泌陽網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造泌陽網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供泌陽網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
我們編寫一個問候的函數(shù)，首先創(chuàng)建一個函數(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ù)組的每一項，并使用每一項作為調(diào)用參數(shù)來調(diào)用函數(shù)greet()：greet('小智')，greet('王大冶')。
有趣的是persons.map(greet)方法接受greet()函數(shù)作為參數(shù)。 這樣做會使reet()成為回調(diào)函數(shù)。
persons.map(greet)是一個接受另一個函數(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ù)組的每個項目作為參數(shù)：'小智'和'王大冶'。
我們可以可以自己編寫使用回調(diào)的高階函數(shù)。例如，這里有一個等價的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)是一個高階函數(shù)，因為它接受回調(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í)行的。
換句話說，同步回調(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()是一個同步回調(diào)函數(shù)，因為它與高階函數(shù)map()同時執(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í)行。
簡而言之，異步回調(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秒后)計時器函數(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('我被點擊啦!');
})
// 點擊按鈕時，才會打印'我被點擊啦!'放在函數(shù)定義之前的特殊關(guān)鍵字async創(chuàng)建一個異步函數(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()是異步的，因為它的前綴是async。 該函數(shù)await fetch('https://api.github.com/users?per_page=5')從 GitHub 前5個用戶。 然后從響應(yīng)對象中提取 JSON 數(shù)據(jù)：await resp.json()。
async函數(shù)是 Promise 的語法糖。 當(dāng)遇到表達(dá)式await 時（注意，調(diào)用fetch()將返回一個 promise），異步函數(shù)將暫停執(zhí)行直到該promise得以解決。
異步回調(diào)函數(shù)和異步函數(shù)是不同的術(shù)語。
異步回調(diào)函數(shù)由高階函數(shù)以非阻塞方式執(zhí)行。 但是異步函數(shù)在等待promise（await ）解析時暫停其執(zhí)行。
但是，我們可以將異步函數(shù)用作異步回調(diào)！
我們異步函數(shù)fetchUserNames()設(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)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
