JavaScript のコールバック関数について説明し、同期コールバックと非同期コールバックを区別しましょう

この記事では、JavaScript のコールバック関数について説明し、コールバック関数の概念を説明し、同期コールバックと非同期コールバックについて学び、それらを区別する方法を確認します。

#コールバック関数は、すべての JS 開発者が知っておくべき概念の 1 つです。コールバックは、配列、タイマー関数、Promise、イベント ハンドラーなどで使用されます。

この記事ではコールバック関数の概念について説明します。さらに、Smartmi が 2 種類のコールバック ( 同期と非同期 ) を区別するのにも役立ちます。

1. コールバック関数

挨拶関数を作成します。まず、ウェルカム メッセージ <pre class='brush:php;toolbar:false;'>function greet(name) { return `Hello, ${name}!`; } greet(&amp;#39;小智&amp;#39;); // =&gt; &amp;#39;Hello, 小智!&amp;#39;</pre>## を返す関数 greet(name)

を作成します。 #何人かに挨拶したい場合はどうすればよいですか?ここでは、

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'。

コールバックを使用して独自の高階関数を作成できます。たとえば、array.map()

method<pre class='brush:php;toolbar:false;'>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 = [&amp;#39;小智&amp;#39;, &amp;#39;王大冶&amp;#39;] const messages = map(persons, greet); messages // [&quot;Hello, 小智!&quot;, &quot;Hello, 王大冶!&quot;]</pre>

map(array, callback)

と同等の は、コールバックを受け入れるため、高階関数です。 function パラメータとして、関数本体内でコールバック関数が呼び出されます: callback(item)。

2. 同期コールバック

コールバックを呼び出すには、同期コールバックと非同期コールバックの 2 つの方法があります。

同期コールバックは、コールバックを使用する高階関数の実行中に実行されます。

言い換えると、同期コールバックはブロッキング状態にあります。コールバックの実行が終了するまで、高階関数は実行を完了できません。

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() と同時に実行されるため、同期コールバック関数です。

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. 非同期コールバック

非同期コールバック 高階関数実行後に実行されます。

つまり、非同期コールバックはノンブロッキングです。高階関数はコールバックの実行が完了するまで待つ必要がなく、高階関数はコールバックが後で特定のイベントで実行されることを保証します。

次の例では、

later()関数の実行遅延は 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 イベント リスナーは、イベント処理関数 (コールバック関数のサブタイプ) を非同期的に呼び出します。

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被点击啦!');
})
// 点击按钮时，才会打印'我被点击啦!'

4. 非同期コールバック関数と非同期関数

Put関数定義で非同期関数を作成する前に、キーワード

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);

summary

コールバックはパラメータであり、受け入れ可能 他の関数（高階関数）から実行される関数。

コールバック関数には同期関数と非同期関数の 2 種類があります。

同期コールバック関数は、コールバック関数を使用した高階関数と同時に実行され、同期コールバックがブロックされています。一方、非同期コールバックは高階関数よりも遅く実行され、非ブロッキングです。

この記事の転載アドレス: https://segmentfault.com/a/1190000041149520

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がJavaScript のコールバック関数について説明し、同期コールバックと非同期コールバックを区別しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。