検索
ホームページウェブフロントエンドjsチュートリアルJavaScriptのコールバック関数を理解する_基礎知識

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

プロジェクトの 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 までご連絡ください。
JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)