jQuery Deferred Timer

ページ開いて数秒後にポップアップをなめらかに閉じる処理とかをよく書くんだけど、setTimeoutとアニメーションの終了タイミングの絡みがフラグ使ったりで管理しなきゃいけなくてめんどくさいので、Deferredで全部書けるようにこれ書いた。

$.wait

$.waitメソッドは時間を引数にとってDeferredオブジェクトを返し、指定した時間後にステータスが変更される。 要はsetTimeoutをこんな感じに書ける。

$.wait(10000).done(function() {
  /* １秒後に行う処理 */
});

$.loop

$.loopメソッドはコールバック関数を引数にとってDeferredオブジェクトを返し、非同期にコールバック関数を繰り返し呼ぶ。 返り値(もしくはコールバック関数の引数)のDeferredオブジェクトをresolve/rejectすることによって、ループを止めることができる。 コールバック関数内でDeferredオブジェクトを返した場合、そのDeferredオブジェクトが解決するまでループを停止する。

$.loop(function(dfd){
  // リクエスト投げてる時とデータ取得後500msループを停止する
  return $.get('data.json').pipe(function(data){
      /* 成功時の処理 */
      return $.wait(500);
    }, function(){
      // 失敗時はループを止める
      dfd.reject();
    });
  })
});