JavaScriptのloop処理はrequestAnimationFrameを使用すると実現できます。
requestAnimationFrame, cancelAnimationFrame はこう使ってる
requestAnimationFrameはモニタのリフレッシュレートに依存しているようで概ね60fpsになります。
そこまでのフレームレートが必要ない場合や、待機状態の時にもう少し低いレートでloopを実行したいことがありました。
可変にできる仕組みを作れないかと思い、一定間隔でサーバーのプログラムを呼び出すために以前作っていたコードを改造してみました。
var PollingManager = (function (){ function PollingManager ( ms ) { this._startTime = 0; this._polling = ms; } PollingManager.prototype.update = function (){ var now = new Date().getTime(), bool = false; if ( ( now - this._startTime ) >= this._polling ) { this._startTime = now; bool = true; } return bool; }; return PollingManager; }()); |
PollingManagerは経過時間をはかり、設定ミリセカンドを超えた時にtrueを返します。
var Main = ( function (){ var _id, _fps; function _loop () { _id = requestAnimationFrame( _loop ); if ( _fps.update() ) { // 以下にfpsに依存しループ実行したいコード }; } function Main () { this._fps = 24; } var p = Main.prototype; p.setFPS = function ( fps ){ _fps = new PollingManager( 1000 / fps ); }; p.start = function (){ if ( typeof _fps === "undefined" ) { _fps = new PollingManager( 1000 / this._fps ); } _loop(); }; p.stop = function (){ cancelAnimationFrame( _id ); }; return Main; }()); var main = new Main(); |
今回のfpsデフォルト値は24にしています。
fpsを設定したい時はsetFPSに引数を渡し実行します。
// fpsを8へ main.setFPS( 8 ); |
他にもっと良い方法はないかな。