requestAnimFrameの実装サンプル

requestAnimFrame.js

// fallback
window.requestAnimFrame = (function() {
  return (
      window.requestAnimationFrame       || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame    || 
      window.oRequestAnimationFrame      || 
      window.msRequestAnimationFrame     || 
      function(callback, time) {
        var time = time ? time: 1000 / 60;
        window.setTimeout(callback, time);
    }
  );
})();

/* cancelAnimationFrame fallback */
if (!window.cancelAnimationFrame) {
  window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
  };
}

var i = 0;

function tick(){
    if (i < 100) {
        i++;
        cl(i, 'hoge');
        requestAnimationFrame(tick);
    }
}

function cl(num, str) {
    console.log(num + ' ' + str);
}

tick();

// -----------------------------
var anim = function() {
  console.log('fuga');
  // 第2引数は、setTimeoutの場合のみ使われる
  requestAnimFrame(anim, 1000 / 1);
};
 
anim();

なおscrollイベントの間引きについては、以下が参考になった

scrollイベントが呼ばれすぎることへの対処
http://javascripter.hatenablog.com/entry/2014/10/03/212017

結論から言うと、スクロールと画面の同期遅れを最小限にしたい場合はsetTimeoutではなくrequestAnimationを使ったほうがsetTimeout(fn, 0)より良くて、画面のチラツキが気にならないような場面ではsetTimeout(fn, 100)くらいを使うと良いと思う。

なおrequestAnimationFrameはグローバルなので、使い方によってはthisがwindowになってしまい動作しないので注意

render: function() {
    this.updatePosition();
    this.draw();
    requestAnimationFrame(this.render.bind(this));  // thisをbindしてやる
}