
import {Observable} from './observable'

var ticking = []
var requestAnimationFrame = window.requestAnimationFrame || function (cb) { setTimeout(cb, 1000 / 60) }

export var renderer = new Observable()

export function batchAnimationFrame (cb) {
  if (!ticking.length) {
    renderer.trigger('render')
    requestAnimationFrame(tick)
  }
  ticking.push(cb)
}

function tick () {
  var cbs = ticking.splice(0, ticking.length)
  for (var i = 0, len = cbs.length; i < len; i++) {
    cbs[i]()
  }
  if (ticking.length === 0) {
    renderer.trigger('rendered')
    return
  }
  tick()
}

@@ -52,16 +52,66 @@
 ng = %5B%5D%0A
+// very simple polyfill for requestAnimationFrame%0A
 var requ
@@ -296,30 +296,146 @@
 %7B%0A  
-if (!ticking.length) %7B
+// batchAnimationFrame collects multiple requestAnimationFrame calls to a single call%0A  if (!ticking.length) %7B%0A    // render cycle starts 
 %0A   
@@ -680,24 +680,49 @@
 th === 0) %7B%0A
+    // render cycle ends%0A
     renderer

Update renderer.js