この記事では、JavaScript のコールバック関数について説明し、コールバック関数の概念を説明し、同期コールバックと非同期コールバックについて学び、それらを区別する方法を確認します。
#コールバック関数は、すべての JS 開発者が知っておくべき概念の 1 つです。コールバックは、配列、タイマー関数、Promise、イベント ハンドラーなどで使用されます。
この記事ではコールバック関数の概念について説明します。さらに、Smartmi が 2 種類のコールバック (同期と非同期) を区別するのにも役立ちます。
挨拶関数を作成します。まず、ウェルカム メッセージfunction greet(name) { return `Hello, ${name}!`; } greet('小智'); // => 'Hello, 小智!'ログイン後にコピー
array.map()メソッドを使用できます。
const persons = ['小智', '王大冶'] const messages = persons.map(greet) messages // ["Hello, 小智!", "Hello, 王大冶!"]
persons.map(greet)personの各項目を受け入れます。 array を作成し、各項目を呼び出しパラメータとして使用して関数greet():greet('Xiao Zhi'),greet('Wang Daye')。
persons.map(greet)メソッドがgreet()関数をパラメータとして受け入れることです。そうすることで、reet()がコールバック関数になります。
persons.map(greet)は、別の関数をパラメータとして受け取る関数であるため、高階関数という名前が付けられています。
persons.map(greet)は、配列の各項目を使用してgreet()コールバック関数を呼び出す役割を果たします。パラメータとして:'Xiao Zhi'および'Wang Daye'。
methodfunction 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, 王大冶!"]ログイン後にコピー
と同等のは、コールバックを受け入れるため、高階関数です。 function パラメータとして、関数本体内でコールバック関数が呼び出されます: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()と同時に実行されるため、同期コールバック関数です。
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);
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()。
asyncFunction はPromiseの糖衣構文です。式await
が出現すると (fetch()
を呼び出すと Promise が返されることに注意してください)、非同期関数はpromise
が実行されるまで実行を一時停止します。解決される。
非同期コールバック関数と非同期関数は異なる用語です。
非同期コールバック関数は、高階関数によって非ブロック方式で実行されます。ただし、非同期関数は、Promise (await
) が解決されるまで待機している間、実行を一時停止します。
fetchUserNames()ボタンがクリックされたときに呼び出される非同期コールバックを設定します:
const button = document.getElementById('fetchUsersButton'); button.addEventListener('click', fetchUserNames);
この記事の転載アドレス: https://segmentfault.com/a/1190000041149520
プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がJavaScript のコールバック関数について説明し、同期コールバックと非同期コールバックを区別しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
