deleyDo
jQueryのためのタイマー管理プラグイン
/
フロントエンドの実装をする際、複数の要素を等間隔なタイミングでササササッとアニメーションで表示する演出をすることが度々あります。その場合、jQuery.animate（または Velocity.js 等のアニメーションライブラリ）の delay オプションを使って遅延処理を行うことが多いのではないでしょうか。
しかし各アニメーションと同じタイミングで、アニメーションそのものとは無関係の別のメソッドをコールしり、特定の変数に値を追加したい時には、delay オプションでは事足りない場合もあります。
そこで以前から自作の jQuery プラグインを作って対応していたのですが、最近中身を整理したのでプラグインディレクトリへ公開しました。Bower からは “delay-do” でルックアップ可能です。
基本的には $.delayDo() で作ったタイマーの中に、遅延させたい複数の処理をあらかじめ代入します。
for (var i =0; i < 10; i++) {
$.delayDo('timerId', function () {
// 繰り返し処理
});
}
$.delayDo('timerId', function () {
// 処理1
});
$.delayDo('timerId', function () {
// 処理2
});
その後、処理を開始したいタイミングで $.delayDo.resume() をコールすると、タイマーの中に入っている処理がなくなるまで等間隔で呼び続けるという挙動をします。また、このタイマーは別の ID を命名すれば複数個作成することも可能です。詳しくは上記リンク先のドキュメントを参照ください。
$.delayDo.resume({
timerId: 'timerId', // タイマーID
interval: 200, // 呼び出す間隔 (ms)
complete: function () {
// タイマー内の最後の処理を終えたとき、
// 実行させたい処理があればここへ記述。
}
});
それであれば、setTimeout を使えばいいのではないか。と疑問に感じられた方はごもっともです。が、このプラグインは内部実装に setTimeout と Date.getTime というレガシーな関数の代わりに、requestAnimationFrame と performance.now を使っており、モダンブラウザでより正確な動作が期待されるところがポイントとなっています。その点に魅力を感じられるのであればお使いになってみてください。なお、レガシーブラウザに対しては従来通りの setTimeout / Date.getTime を実行するポリフィルを実装していますので幅広いバージョンのブラウザで動作をするかと思います。
Masonry と delayDo プラグインによる遅延アニメーションの例
See the Pen delayDo Example 3 by Takehiko Ono (@onopko) on CodePen.