JavaScriptのコールバック関数とは何ですか?

JavaScript では、コールバック関数はパラメーターとして渡される関数です。関数 A がパラメータ (関数参照) として別の関数 B に渡され、この関数 B が関数 A を実行します。関数 A はコールバック関数と呼ばれ、名前 (関数式) がない場合は匿名コールバック関数と呼ばれます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

コールバック関数 (Callback) とは

#JavaScript では、関数はオブジェクトです。したがって、関数は関数をパラメーターとして受け取ることができ、他の関数によって関数を返すことができます。これを行う関数は高階関数と呼ばれます。パラメータとして渡される関数はコールバック関数と呼ばれます。

コールバック関数の具体的な定義は次のとおりです。関数 A がパラメータ (関数参照) として別の関数 B に渡され、この関数 B が関数 A を実行します。関数 A をコールバック関数と呼ぶとしましょう。名前（関数式）がない場合は、匿名コールバック関数と呼ばれます。

なぜコールバックが必要なのでしょうか?

非常に重要な理由が 1 つあります - JavaScript はイベント駆動型言語です。これは、JavaScript が応答を待ち続けるのではなく、他のイベントをリッスンしながら実行を続けることを意味します。基本的な例を見てみましょう:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

ご想像のとおり、関数が最初に実行され、次に 2 番目の関数が実行され、次の内容がコンソールに記録されます:

// 1
// 2

これまでのところ、すべてが非常にうまく機能しています。 。

しかし、関数にすぐに実行できないコードが含まれている場合はどうなるでしょうか?たとえば、最初にリクエストを送信してからレスポンスを待つ必要がある API リクエストはどうでしょうか?このアクションをシミュレートするには、setTimeout が使用されます。これは、設定された時間の後に呼び出される JavaScript 関数です。 API リクエストをシミュレートするために、関数を 500 ミリ秒遅延させます。新しいコードは次のようになります:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

現在、setTimeout() がどのように機能するかを理解することは重要ではありません。重要なのは、console.log(1) を 500 ミリ秒の遅延以内に移動したことがわかります。では、関数を呼び出すとどうなるでしょうか?

first();
second();
// 2
// 1

最初に first() 関数を呼び出したにもかかわらず、その結果は Second() 関数の後に出力されました。

JavaScript が必要な順序で関数を実行していないのではなく、JavaScript が Second() に進む前に first() からの応答を待っていないのです。

では、なぜこれを見せているのでしょうか?関数を次々に呼び出して、それらが正しい順序で実行されることを期待することはできないからです。コールバックは、他のコードの実行が終了するまで特定のコードが実行されないようにする方法です。

コールバック関数の作成

それでは、早速、コールバックを作成してみましょう。

まず、Chrome 開発者コンソール (Windows: Ctrl Shift J) (Mac: Cmd Option J) を開き、コンソールに次の関数宣言を入力します。

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

次に、コールバックを追加しましょう - do宿題()関数の最後のパラメータとして、コールバックを渡すことができます。次に、 do宿題() の呼び出しの 2 番目のパラメーターでコールバック関数を定義します。

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

ご覧のとおり、コンソールに上記のコードを入力すると、「宿題の開始」アラートと「宿題の終了」アラートの 2 つのアラートが表示されます。

ただし、関数呼び出しでコールバック関数を定義する必要は必ずしもありません。これらはコード内の別の場所で次のように定義できます。

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

この例の結果は前の例とまったく同じですが、設定が若干異なります。 do宿題() 関数呼び出し中に、alertFinished 関数定義をパラメーターとして渡していることがわかります。

#実際の例

Twitter の API を呼び出してみます。 API にリクエストを送信した場合、その応答に基づいて操作を行う前に、応答を待つ必要があります。これは真のコールバックの良い例です。リクエストは次のようになります。

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get は、get リクエストを Twitter に送信していることを意味します

このリクエストには 3 つのパラメータが含まれています: "search/tweets" (これはルートです) request )、params (検索パラメータ)、および匿名関数 (コールバック) です。

コードの実行を続行するにはサーバーの応答を待つ必要があるため、ここではコールバックが重要です。 API リクエストが成功するかどうかはわかりません。そのため、get リクエストを介して検索/ツイートのパラメータを送信した後、待機します。 Twitter が応答すると、コールバック関数が呼び出されます。 Twitter はエラー (エラー) オブジェクトまたは応答オブジェクトを送信します。コールバック関数内で、if() ステートメントを使用してリクエストが成功したかどうかを判断し、それに応じて新しいデータに基づいて動作することができます。

[関連する推奨事項:

JavaScript 学習チュートリアル

]

以上がJavaScriptのコールバック関数とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。