Blogブログ

jqueryのwhen～doneを少しでも楽に書く

順番になんらかの処理を実行させたいとき、一連の処理終了後に別の処理を実行する「When～Done」。
表現の幅が広がって便利です。
Suffixの見出しで使われている「緑色の帯が左から伸びてから右に消えていく」という動きは
Whenで「緑色の帯が左から伸びる」を行い、Doneで「右に消えていく」という処理の流れです。
このWhen～Done、少ない記述量であれば可読性が損なわれることはないのですが、

Whenで「ロード用アイコンを表示させ、データを数件html出力」
数件表示完了後、Doneで「ロード用アイコンを破棄」

このような動きを作成するとWhen側への記述量が膨れ上がり可読性が低くなったので困りました。 もっと楽に書けないかと思い調べたら便利な書き方がありました。

超ざっくりと理解する無名関数（匿名関数）
https://qiita.com/janet_parker/items/516ba8adec44f27def97

これがなんの関係があるのかってとこですが、
この無名関数でWhen側の処理をひとまとめにしておくと↓のように書けます。

記述例

$.when(func()).done(function () {
  終了後の処理
});

jqueryのセレクタ指定で何か指示与える文法って例えば↓みたいに書くんですけど

$(".sample").css("color","red");

when側にそのまま書くとエラーになります。
whenの中に複数書く場合はカンマ(,)でつなぎます。一番最後は何も無しで。
これが凄くわかりづらい。通常の書き方させてくれよと。
別にいつもどおり末尾にセミコロンつけてもいいじゃんと思うわけですよ。

けど、無名関数を先に定義しておけばWhenの中の文法に惑わされることが無いです。
Whenの中に「func()」って書くだけでいいですから。

ちなみにDone側は通常の書き方で問題ないです。なんでだ。

人によっては「なんだ、そんなことか」としか思われなさそうな小ネタなんですけど、
自分にはかなりロスが減るネタだなと思った次第であります。