JavaScriptでcallbackに引数を与えたい。

やりたいこと

JavaScriptのcallbackに引数を使いたい。

方法

callbackのmethodが関数オブジェクトを返すようにする。

説明

たとえばjQueryで以下のようなコードを書いてもうまくいきません。

view plainprint?

1. var callbackMethod1 = function(target){  
2.     target.slideDown(1000);  
3. }  
4.   
5. $("#div0").slideUp(1000, callbackMethod1($("#div0")));  

    var callbackMethod1 = function(target){
        target.slideDown(1000);
    }

    $("#div0").slideUp(1000, callbackMethod1($("#div0")));

しかし、以下は動作します。

view plainprint?

1. var callbackMethod2 = function(){  
2.         $("#div1").slideDown(1000);  
3. }  
4.   
5. $("#div1").slideUp(1000, callbackMethod2);  

    var callbackMethod2 = function(){
            $("#div1").slideDown(1000);
    }

    $("#div1").slideUp(1000, callbackMethod2);

callbackMethod1のslideDownをfadeOutに変更して実行してみると、slideUpと同時にfadeOutしているのが確認できます。つまり、slideUpの動作が完了してからcallbackMethod1が呼ばれているのではなく、ほぼ同時に動作してしまっています。つまり、引数つきのcallbackをslideUpに渡す時点で、callbackMethod1を実行しまっているということです。

callbackMethod2はcallbackMethod2の参照を渡しているので、callbackをslideUpに渡す時点では実行されず、動作完了後にslideUpがcallbackMethod2を実行します。

引数を取るメソッドが関数オブジェクトを返すようにすることで意図通り動作させることができます。

view plainprint?

1. var callbackMethod3 = function(target){  
2.     return function(){  
3.         target.slideDown(1000);  
4.     }  
5. }  
6.   
7. $("#div2").slideUp(1000, callbackMethod3($("#div2")));  

    var callbackMethod3 = function(target){
        return function(){
            target.slideDown(1000);
        }
    }

    $("#div2").slideUp(1000, callbackMethod3($("#div2")));

callbackでの処理がその箇所でしか使用しない場合は単に以下のように無名関数で書くとよいでしょう。

view plainprint?

1. $("#div3").slideUp(1000, function(){  
2.     $("#div3").slideDown(1000);  
3. });  

    $("#div3").slideUp(1000, function(){
        $("#div3").slideDown(1000);
    });