[MooTools] Chainについて

MooToolsにはChainというクラスがある。
これは関数の実行を数珠繋ぎに出来る便利なヤツです。

公式にあるChainのデモはFxのstartメソッドにchainメソッドをくっつけているものなのだけど、
ドキュメントの一番上に載っている、クラスにChainをImplemantするサンプルコードを実行してみると動かなかったりする。

    var Todo = new Class({
        Implements: Chain,
        initialize: function(){
            this.chain.apply(this, arguments);
        }
    });
 
    var myTodoList = new Todo(
        function(){ alert('get groceries'); },
        function(){ alert('go workout'); },
        function(){ alert('code mootools documentation until eyes close involuntarily'); },
        function(){ alert('sleep'); }
    );

jsFiddleに移したサンプルがこちら

Runボタン（右側の矢印）を押しても何も起きない。

そこでcallChainを各関数に入れる。
分かりやすくPタグを作成してメッセージが出るようにしてみた。

すると関数が全部実行されるようになります。

実行のタイミングをずらしたい場合にはcallChainにdelayを使う。

この場合、delayの2番目の引数でthisを指定しないとエラーになる。

さらに何かエフェクトをつけたいとする。callChainはstartにくっつけて使ったりは出来ないのでthis.callChainのままなんだけど、
エフェクトのdurationとdelayを同じにしないとアニメーションの途中で次のchainが実行される。

※Fxエフェクトはデフォルトがduration:500になっている。

Requestとかで確実に完了後に実行したいなんてときはonCompleteメソッドにthis.callChainを入れると良い。

結論：ちょっとクセがあるけどChainは便利。