無理しないでゆっくり休んでね!

jQuery Callback

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("無くなった!"))が実行されます。つまり、テキストが完全に隠れた後で、アラートが表示されます。

この違いは特に速度パラメータが設定されているときに顕著になります。

コメント

タイトルとURLをコピーしました