ホームページ > 記事 > ウェブフロントエンド > JavaScriptのコールバック関数とは何ですか?
JavaScript では、コールバック関数はパラメーターとして渡される関数です。関数 A がパラメータ (関数参照) として別の関数 B に渡され、この関数 B が関数 A を実行します。関数 A はコールバック関数と呼ばれ、名前 (関数式) がない場合は匿名コールバック関数と呼ばれます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
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() からの応答を待っていないのです。 では、なぜこれを見せているのでしょうか?関数を次々に呼び出して、それらが正しい順序で実行されることを期待することはできないからです。コールバックは、他のコードの実行が終了するまで特定のコードが実行されないようにする方法です。
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 関数定義をパラメーターとして渡していることがわかります。 #実際の例
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 サイトの他の関連記事を参照してください。