この記事は、The Difference Between Chaining and Callbacks - by Chris Coyierの日本語訳です。
チェーンとコールバックの違い
少し前のことになりますが、私が運営をしている「jQueryを走り書きから学ぶ」という勉強会を開いた時にこのテーマをまとめました。既にご存知の方には明確な違いかもしれませんが、私自身この違いについて非常に混乱した記憶があるので掲載させて頂きます。
jQueryではとても簡単にチェーンを作ることができます。
一つの要素コレクションに対して、つなげて、つなげて、つなげるだけです。
// これはチェーンです。
$(".thing")
.addClass("cool") // これをつなげます！
.animate({ // そしてつなげます!
"padding": 20
}, 4000)
.css("color", "red"); // そしてつなげます!
↑のチェーンにおいて、3つのつなげられたチェーンは素早く順々に実行されます。
ここである疑問が湧きます。処理の待機は一体どうなっているのでしょうか？3つの処理はどの処理がどの処理を待機して素早く順々に実行されているのでしょうか？
実は、これら3つの処理は同期的に実行されています。そのため、この例ではanimateが実行されるより前にクラス名である「cool」が要素に対して付加されることになります。このようにしてアニメーションが始まり、その次のタイミングで要素の文字色は赤になります。
アニメーションのスタートは同期的に行われるため、文字色の変更より先に開始されますが、文字色の変更の開始タイミングはアニメーションの終了を待ちません。チェーンでは前処理の開始タイミングのみが次処理の開始タイミングの引き金となり、処理の終了タイミングについては無視さるのです。
もし、次の処理をアニメーションの終了タイミングで行いたい場合どうすればよいでしょうか？そのときは「コールバック」の出番です。
こちらを見てください。
// これは「コールバック」です。
$(".thing")
.animate({ // 実行します
"padding": 20
}, 4000, function() {
$(this).css("color", "red"); // アニメーションの終了時に実行されます。
});
全てはタイミングの違いだったのです。