ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptのコールバック関数を理解する_基礎知識

JavaScriptのコールバック関数を理解する_基礎知識

WBOY
WBOYオリジナル
2016-05-16 16:23:51950ブラウズ

関数をパラメータとして別の関数に渡します。この関数はいわゆるコールバック関数です

プロジェクトの A 層と B 層が異なる人によって完成される状況によく遭遇します。A 層は関数 funA を担当し、B 層は関数 funcB を担当します。レイヤ B が特定のモジュールからのデータを使用したいとき、彼はレイヤ A の人々に、「特定のニーズを満たすデータを提供してください、そしてあなたは私にインターフェースを提供してください」と言います。

レベル A の担当者は、「データは私が提供します。それをどのように表示して処理するかは B の仕事です」と言いました。
もちろん、レイヤー B は、すべてのニーズに対応するデータ インターフェイスを提供することはできません。B は、B がデータを取得するためのインターフェイスを提供し、それを表示する関数を作成します。

つまり、他の人々と協力する必要があり、他の人々がデータを提供し、他の人々がどのようにデータを取得または構築するかに注意を払う必要はありません。取得したデータを操作するだけです。このとき、コールバック関数

を使用する必要があります。

したがって、コールバックは本質的に設計パターンであり、jQuery (他のフレームワークを含む) の設計原則はこのパターンに従います。

同期 (ブロッキング) でのコールバックの使用例。目的は、func1 コードの実行が完了した後に func2 を実行することです。

コードをコピーします コードは次のとおりです:

var func1=関数(コールバック){
//何かをします。
(コールバック && typeof(callback) === "関数") && callback();
}

関数1(関数2);
var func2=function(){
}

非同期コールバックの例:

コードをコピーします コードは次のとおりです:

$(document).ready(callback);

$.ajax({
URL: "test.html",
コンテキスト: document.body
}).done(function() {
$(this).addClass("done");
}).fail(function() {
アラート("エラー");
}).always(function() {
アラート("完了"); });

ajax リクエストは確かに非同期ですが、リクエストのステータスが変更されると、このリクエストはブラウザによって新しいスレッドを開くように要求されることに注意してください。コールバックが以前に設定されていた場合、非同期スレッドはステータス変更を生成します。イベントを取得し、JavaScript エンジンの処理キューに処理待ち状態に入れます。参照:

http://www.phpv.net/html/1700.html

コールバックはいつ実行されますか?

コールバック関数は通常、同期状況では最後に実行されますが、非同期状況ではイベントがトリガーされなかったり、条件が満たされなかったりするため、実行されない場合があります。

コールバック関数の利用シーン

リソースのロード: js ファイルを動的にロードした後にコールバックを実行、iframe をロードした後にコールバックを実行、Ajax 操作のコールバック、画像のロード完了後にコールバックを実行、AJAX など。

DOM イベントと Node.js イベントはコールバック メカニズムに基づいています (Node.js コールバックには、マルチレイヤー コールバックのネストの問題が発生する可能性があります)。
setTimeout の遅延時間は 0 です。このハックはよく使用されます。settimeout によって呼び出される関数は、実際にはコールバック
の具体化です。

連鎖呼び出し: 連鎖すると、割り当て子 (セッター) メソッド (または値自体を返さないメソッド) で連鎖呼び出しを実装するのは簡単ですが、ゲッター (ゲッター) の実装は比較的困難です。連鎖呼び出し。このポインターの代わりに必要なデータを返すためにバリューラーが必要なため、連鎖メソッドを実装したい場合は、コールバック関数を使用して実装できます。


setTimeout と setInterval の関数呼び出しは戻り値を取得します。どちらの関数も非同期であるため、つまり、呼び出しシーケンスがプログラムのメインプロセスから比較的独立しているため、本体内で戻り値を待つ方法がなく、戻り値が返されたときにプログラムが停止したり待機したりすることはありません。そうしないと setTimeout と setInterval の意味が失われるため、return を使用する意味はなく、callback のみを使用できます。コールバックの意味は、タイムリーな処理のためにタイマーの実行結果をエージェント関数に通知することです。

オンラインで情報を収集すれば、私自身でも例を整理できます。

コードをコピー コードは次のとおりです:

関数 fun(num,callback){
If(num alert("処理のために層 A 関数を呼び出しています!");
alert("データを負にすることはできません。入力エラーです!"); }else if(num==0){
alert("処理のために層 A 関数を呼び出しています!");
alert("このデータ項目は存在しません!");
}その他{
alert("B層関数の処理を呼び出します!");
コールバック(1);
}
}
関数テスト(){
var num=document.getElementById("スコア").value;
Fun(num,function(back){ //匿名の B 層処理関数
alert(":" 戻る);
If(num alert("その数は 1");
else if(num alert("その数は 2 か 3 です!");
その他
alert("数値は 3 より大きいです!"); })
}


関数が fun の実行を開始すると、最初に num が負の数かゼロかを判断するために実行され、それ以外の場合は B 層の処理関数alert(":" back) が実行され、1 が出力され、3 およびその他の状況。

体験のヒント:

コールバックが存在し、関数参照または関数式であることを確認することが最善です:

コードをコピーします コードは次のとおりです:
(コールバック && typeof(callback) === "関数") && callback();


コードをコピーします コードは次のとおりです:
var obj={
init: 関数(コールバック){
//TODO...
If(callback && typeof(callback) === "関数") && callback()){
callback('init...');//Callback
}
}


最後に、なぜコールバック関数を使用する必要があるのでしょうか?次の比喩は非常に鮮やかで興味深いものです。

用事があるとき、隣の寮にクラスメートを探しに行きましたが、クラスメートがいないことに気づきました。どうしたらよいでしょうか。

方法 1、数分ごとに隣の寮に行き、誰かがいるかどうかを確認します

方法2、彼と同じ寮の人たちに、彼が帰ってくるのを見かけたら電話してもらうようお願いしてください


前者はポーリングであり、後者はコールバックです。

それでは教えてください、クラスメートが戻ってくるまで隣の寮で待っていてもいいですか?

はい、他のことをする時間を節約できたかもしれませんが、今度は待つことで時間を無駄にしなければなりません。元の非ブロッキング非同期呼び出しをブロッキング同期呼び出しに変更します。

JavaScript コールバックは非同期呼び出しシナリオで使用され、コールバックを使用した場合のパフォーマンスはポーリングよりも優れています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。