ホームページ > 記事 > ウェブフロントエンド > jqueryのコールバック関数(callback)の使い方を詳しく解説
jqueryのコールバック関数(callback)の使い方を詳しく解説
- 伊谢尔伦オリジナル
- 2017-06-16 16:41:595392ブラウズ
jqueryを独学で勉強していた時、英単語(Callback)を見て、思わず背中に冷や汗をかきました。ちょっとグーグルで調べたところ、元の中国語翻訳は callback であることがわかりました。それがコールバック関数です。理解できなかったので、コールバック関数についてググってみたところ、インターネット上の中国語の説明はあまりにも「難解」であることがわかり、自分の才能と知識が不足していたことを認めました。いくつかのコールバックの例を読んだ後、少し理解できたように思います。以下はコールバック関数についての私の理解です。間違って理解している場合は、修正していただければ幸いです。 Q まず、jQuery Web サイトの英語の定義から始めましたが、中国人として本当に悲劇を感じます。コールバックの定義は国内の「専門家」が説明する ぐるぐる回っているだけのようだ。浮雲、すべてが浮雲です。
コールバックとは、別の関数に引数として渡され、親関数の完了後に実行される関数です。
これはjsでの説明であり、他の言語では触れていません。
文字通り理解すると、コールバックは関数の呼び出しプロセスです。それでは、この呼び出しプロセスを理解することから始めましょう。関数 a には関数 b という 1 つのパラメータがあります。関数 a が実行されると、関数 b も実行されます。そして、このプロセスはコールバックと呼ばれます。
実際、中国語もわかりやすいです。コールバック、コールバック、コールバックという意味です。関数 a を先に終了し、後で関数 b を呼び出します。
実際の例: デートの後、彼女を家に送り届けるとき、あなたは必ず「家に帰ったらメッセージを送ってください。あなたのことが心配です。」と言うでしょう。実際にメッセージを送った後、ガールフレンドが返信します。少年、あなたにはチャンスがあります。
実際、これはコールバックプロセスです。あなたは機能 b (彼女にメッセージを送ってもらう) を彼女に残し、彼女が家に帰るという行動が機能 a です。彼女はまず家に戻り、関数 a の内容を実行し、次に関数 b を実行する必要があります。すると、メッセージが表示されます。
ここで 1 つ明確にしておく必要があります。関数 b はパラメーターの形式で関数 a に渡され、関数 b はコールバック関数と呼ばれます。
もしかしたら誰かが疑問を持っているかもしれません: 関数 b を関数 a で直接呼び出すことはパラメータの形式で渡す必要がありますか?確かにそれは可能です。解決中。
273ec4091a2738017ca08eb77b064fcc
理解の例: <html>
<head>
<title>回调函数(callback)</title>
<script language="javascript" type="text/javascript">
function a(callback)
{
alert("我是parent函数a！");
alert("调用回调函数");
callback();
}
function b(){
alert("我是回调函数b");
}
function c(){
alert("我是回调函数c");
}
function test()
{
a(b);
a(c);
}
</script>
</head>
<body>
<h1>学习js回调函数</h1>
<button onClick=test()>click me</button>
<p>应该能看到调用了两个回调函数</p>
</body>
</html>コールバック関数は誰でも使用できますが、Jquery がコールバック関数をカプセル化すると、コールバック関数の実際の使い方を誰もが理解できるようになります。
JS API では、次のように説明されています。コールバックは、別の関数に引数として渡され、その親関数が完了した後に実行される関数です。
もちろん、JS でコールバック関数の魔法を実際に試すこともできます。
関数a内で直接呼び出すと、このコールバック関数は制限されます。ただし、関数をパラメーターとして使用すると、次のような利点があります。 a(b) を実行すると関数 b がコールバック関数になり、a(c) も実行できる場合は関数 c がコールバック関数になります。関数 a(){...;b();} を作成すると、変数の柔軟性が失われます。コードは次のとおりです:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="GBK" />
<title>回调函数(callback)</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var f;
function d(){
alert("我是Jquery定义的函数d");
}
var e = function(){
alert("我也是Jquery定义的函数e");
}
function a(callback) {
alert("我是parent函数a！");
d();
if (typeof callback === "function"){
//alert(callback);
callback();
}
}
function b(){
alert("我是回调函数b");
d();
e();
f();
}
function c(){
alert("我是回调函数c");
d();
e();
f();
}
function test1() {
a(b);
}
function test2() {
a(c);
}
$(function(){
f = function(){
alert("我是回调函数f");
}
});
</script>
</head>
<body >
<h1>学习js回调函数</h1>
<button onClick=test1()>test a(b)</button>
<button onClick=test2()>test a(c)</button>
<p>应该能看到调用了两个回调函数</p>
<p > </p>
</body>
</html>以上がjqueryのコールバック関数(callback)の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。