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

やりたいこと

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

方法

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

説明

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

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

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

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

    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を実行します。

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

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

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

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

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