requestAnimationFrameをつくろう

developer.mozilla.org

このページ を参考にrequestAnimationFrameがつかえないブラウザ用に同じような機能を提供すべくコードを書いてみました。

JavaScript

var requestAnimationFrame = win.requestAnimationFrame || win.mozRequestAnimationFrame || win.webkitRequestAnimationFrame,
    cancelAnimationFrame  = win.cancelAnimationFrame || win.mozCancelAnimationFrame;

var startTime = 0,
    lastTime  = 0;

if (!win.requestAnimationFrame) {
  requestAnimationFrame = function(callback) {
    var currentTime = new Date() - 0,
        INTERVAL    = 1000 / 60,
        id;

    if (!lastTime) {
      startTime = currentTime;
      lastTime  = currentTime;
    }

    id = setTimeout(function() {
      callback(currentTime - startTime);
    }, INTERVAL);

    lastTime = currentTime;

    return id;
  };

  cancelAnimationFrame = function(id) {
    clearInterval(id);
    startTime = 0;
    lastTime  = 0;
  };
}

win.requestAnimationFrame = requestAnimationFrame;
win.cancelAnimationFrame  = cancelAnimationFrame;

こんな感じでしょうか。
この書き方だと同時に複数走らせるとよろしくない結果になってしまう気がしますが、今回はこんな感じです。