本篇文章帶大家深入了解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 16a49f6d1cdea6399ea3ae092673f05b
時(注意,呼叫fetch()
將傳回一個promise),非同步函數將暫停執行直到該promise
得以解決。
非同步回呼函數和非同步函數是不同的術語。
非同步回呼函數由高階函數以非阻塞方式執行。但是非同步函數在等待promise(await 16a49f6d1cdea6399ea3ae092673f05b
)解析時暫停其執行。
但是,我們可以將非同步函數用作非同步回調!
我們非同步函數fetchUserNames()
設為點擊按鈕時呼叫的非同步回呼:
const button = document.getElementById('fetchUsersButton'); button.addEventListener('click', fetchUserNames);
回調是一個可以作為參數接受並由另一個函數(高階函數)執行的函數.
有兩種回呼函數:同步和非同步。
同步回呼函數與使用回呼函數的高階函數同時執行,同步回呼是阻塞的。另一方面,非同步回呼的執行時間比高階函數的執行時間晚,非同步回調是非阻塞的。
英文原文網址:https://dmitripavlutin.com/javascript-variables-practices/
作者:Shadeed
更多程式設計相關知識,請造訪:程式設計入門! !
以上是深入淺析JavaScript中的回呼函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!