この記事は賞味期限切れです。（更新から1年が経過しています）

jQueryのアニメーション機能はあまりにも便利ですが、
刻々と位置情報などを更新していくタイプの処理には向いていません。
こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、
似たような実装をJavaScriptで出来ないだろうか、というのが今回の趣旨です。

生のsetInterval/setTimeoutでいいんじゃない？

ごもっとも。そんなに複雑にはなりませんしね。
ただ、もうちょっと直感的に扱いたかったり、管理し易いクラスが欲しかった。
さらに強いて言えば、「書いてみたかった」のです。

以下に、2通りのパターンをライブラリにしてみました。
さりげなくjsdo.itデビューも果たしてみましたよ！

※いずれもjQueryを使用

Timeline.js

jQueryのbind/triggerを使ってイベントを拾っていくタイプです。
AS3のaddEventListenerに最も近くて馴染み易いのではないでしょうか。
…相変わらずコメントのほうが長い！

Source

timeline.js at master from mach3’s js-timeline-enterframe – GitHub

Demo

JavaScriptでEnterFrame：(1) Timeline.js – jsdo.it

使い方

var tl = new Timeline( 30 ); // 引数はfps
tl.bind( "enterFrame", function(){ /* do something */ } );
tl.start(); // タイムライン開始

コンストラクタの引数は省略可能。FPSの初期値は30です。

var func = function(){ /* do something */ };
tl.bind( tl.EVENT_ENTER_FRAME, func ); // イベントリスナの追加
tl.unbind( tl.EVENT_ENTER_FRAME, func ); // イベントリスナの削除

イベントリスナを削除したい時用に、unbindのwrapperも用意してございます。
また、イベント名（enterFrame）は定数EVENT_ENTER_FRAMEに格納してあります。

EnterFrame.js

こちらはもう少し簡略化したタイプで、わざわざjQueryのbind/triggerを介しません。
若干のパフォーマンス向上が見込めるのではないかと予想。
ただ、ActionScriptの実装とはだいぶかけ離れてしまった…

Source

enterframe.js at master from mach3’s js-timeline-enterframe – GitHub

Demo

JavaScriptでEnterFrame：(2) EnterFrame.js – jsdo.it

使い方

var ef = new EnterFrame( 30 ); // インスタンス生成
ef.add( function(){ /* do something */ });
ef.start();

addメソッドでイベントリスナを追加。その他はTimelineと同様です。

var func = function(){ /* do something */ } );
ef.add( func ); // イベントリスナの追加
ef.remove( func ); // イベントリスナの削除

削除にはremoveメソッドを使用します。

まとめ

画面いっぱい使ってヌルヌル動くギャラリーなんかは、
いがいと作り易いかもしれないですね。

追記 : 2013/10/13

今なら requestAnimationFrameとかもあるので、setTimeout等を使うより
こちらがある場合は利用した方がよさそうですね。
そのうち記事になると思います。