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

jQuery
jQuery

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

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

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

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

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

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

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

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

以下が、上記の「コピー」ボタンで実際に使用しているコードです。

$.when(
    $('#js-copybtn').html('コピーしました!').delay(1000)
).done(function(){
    $('#js-copybtn').html('コピー')
;});

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

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

なぜかというと、

$.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がこれを流したとき、鳥肌が立った。

タイトルとURLをコピーしました