【jQuery】処理Aが完了してから処理Bを実行する方法

できそうで実はある「熟語」を使わないと難しい！

以下のようなjQueryのメソッドの連結記法（チェーンメソッド）を使えば一見簡単そうに思いますが、実は違います。

//メソッドA().メソッドB().メソッドC()・・・というように、連続して記述
$('#e').showl().delay(2000).fadeOut(400);

結論からいうと、以下で実装できます。

$.when(
    //処理A
).done(function(){
    //処理B
;});

例を挙げると、以下のような、ボタン内の文字が、ボタンを押したあと1秒間だけ表示が変わるようなときです。
（実際に押すと挙動がわかります）

これをチェーンメソッドでやろうとすると、ボタン内の文字の書き換えのjQueryがチェーンメソッド内に２つあるために、
最後に記述したほうの書き換え処理しか実行されません。
チェーンメソッドは連結記法ではありますが、記述した時系列順に処理を実行するものではないことに注意です。
記述した複数のメソッドが同時に実行されるイメージです。

それに対して、when()とdone()を組み合わせた上記の構文では、whenの引数に入れた処理が完了してからdoneの処理を実行します。

この「熟語」、実はそらで打とうとすると、かなり間違いやすいです。

この「熟語」、実はそらで打とうとすると、かなり間違いやすいです。

なぜかというと、

$.when(
    //処理A  ←ここではメソッドのあとに;が不要！
).done(function(){　//←なんと、done()ではfunction()でメソッドBを呼ぶ必要がある！
    //処理B
;  //←function()を使っているのでここではメソッドのあとに;が必要になっている！
});  //←もう、カッコを何個かいて;を打てばいいのかどうかもよくわかんないw（javascriptあるある）

なので、メモ帳アプリやこのブログをブックマークして、いつでも引っ張り出せるところに置いておくのがよいと思います。

今日聞いていた曲はこれどえーす♪

Sonic Species・・・Joe Markendaleのプロジェクト。2008年にU.K. レーベルAlchemy Recordsへアサインし、コンピレーションCDに収録された’Lost Transmission’ で瞬く間にその名を知らしめた。2019年Sun Shine Festivalのトリを飾ったElectric Universeがこれを流したとき、鳥肌が立った。