jQuery Callback
jQueryマニュアルCallback関数は、現在のアニメーションが 100% 完了した後に実行されます。
Callback関数とは？
Callback(コールバック)関数とは、ある関数の引数として渡される関数のことを指します。その関数の動作が終わった後で、渡された関数（コールバック関数）が呼び出されます。
function 関数( 別の関数（callbck） ) {
//何らかの処理を記述する
//引数に指定した関数を実行する
callback();
}jQueryでは、アニメーションメソッドなど多くのメソッドでコールバック関数を利用できます。これらのメソッドは、動作が終わった後に実行したい処理をコールバック関数として指定できます。
Callback関数の使用例
たとえば、次のコードは、ボタンをクリックするとテキストがフェードアウト（徐々に透明に）し、フェードアウトが完了した後にアラートが表示されます。
<button>クリックしてフェードアウト</button>
<p>ここにあるテキストがフェードアウトします。</p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut(1000, function(){
alert("フェードアウト完了!");
});
});
});
</script>ここにあるテキストがフェードアウトします。
この例では、fadeOutメソッドの第二引数にアラートを表示する関数をコールバック関数として指定しています。
Callbackを使わないコードとの比較
使わない場合
<button id="hideButton1">①使わない場合：クリックして隠す</button>
<p id="hideText1">俺はテキストだ</p>
<script>
$(document).ready(function(){
$("#hideButton1").click(function(){
$("#hideText1").hide(1000);
alert("なくなった！");
});
});
</script>使う場合
<button id="hideButton2">②使う場合：クリックして隠す</button>
<p id="hideText2">ボタンをクリックしたら、俺がなくなる</p>
<script>
$(document).ready(function(){
$("#hideButton2").click(function(){
$("#hideText2").hide("slow",function(){
alert("無くなった！");
});
});
});
</script>俺はテキストだ
ボタンをクリックしたら、俺がなくなる
1つ目（①使わない場合）では、コールバック関数を使用せずにhide()関数を直接使用しています。hide()関数は、選択した要素（ここでは#hideText1）を隠します。この関数が実行されると、直後にalert()関数が実行され、「なくなった！」というメッセージが表示されます。
2つ目（②使う場合）では、コールバック関数を使用しています。ここでは、hide()関数が完全に実行された後で、コールバック関数（alert("無くなった！")）が実行されます。つまり、テキストが完全に隠れた後で、アラートが表示されます。
コメント