rename limiter to throttle and refactor

- don't inject raf/setTimeout since we can't really mock them w/ a good degree of timing accuracy anyways

fix some unrelated tests

api/limiter.js

@@ -1,37 +0,0 @@
-"use strict"
-
-var FRAME_BUDGET = 16 // 60 frames per second = 1 call per 16 ms
-
-module.exports = function($window, render) {
-	var rAF = $window.requestAnimationFrame || $window.setTimeout
-	
-	var last = 0
-	var pending = null
-	
-	return function(force) {
-		var now = new Date()
-		
-		// Immediately render if:
-		// Forced
-		// Haven't rendered yet
-		// Time since the last render is greater than the frame budget
-		if(force || !last || now - last > FRAME_BUDGET) {
-			last = now;
-			
-			return render()
-		}
-		
-		// Redraw already pending, abort
-		if(pending !== null) {
-			return
-		}
-		
-		// Schedule a redraw for the next tick
-		pending = rAF(function() {
-			render()
-			
-			last = new Date()
-			pending = null
-		}, FRAME_BUDGET - (now - last))
-	}
-}

api/mount.js

@@ -1,18 +1,18 @@
 "use strict"
 
 var createRenderer = require("../render/render")
-var limiter = require("./limiter");
+var throttle = require("../api/throttle")
 
 module.exports = function($window, redraw) {
+	var renderer = createRenderer($window)
 	return function(root, component) {
-		var renderer = createRenderer($window)
-		var draw = limiter($window, function draw() {
+		var run = throttle(function() {
 			renderer.render(root, {tag: component})
 		})
 		
-		renderer.setEventCallback(draw)
+		renderer.setEventCallback(run)
 	
-		redraw.run = draw
-		draw()
+		redraw.run = run
+		run()
 	}
 }

api/router.js

@@ -2,20 +2,21 @@
 
 var createRenderer = require("../render/render")
 var createRouter = require("../router/router")
-var limiter = require("./limiter")
+var throttle = require("../api/throttle")
 
 module.exports = function($window, redraw) {
 	var renderer = createRenderer($window)
 	var router = createRouter($window)
 	var route = function(root, defaultRoute, routes) {
-		var replay = limiter($window, router.defineRoutes(routes, function(component, args) {
+		var replay = router.defineRoutes(routes, function(component, args) {
 			renderer.render(root, {tag: component, attrs: args})
 		}, function() {
 			router.setPath(defaultRoute)
-		}))
+		})
+		var run = throttle(replay)
 		
-		renderer.setEventCallback(replay)
-		redraw.run = replay
+		renderer.setEventCallback(run)
+		redraw.run = run
 	}
 	route.link = router.link
 	route.prefix = router.setPrefix

api/tests/index.html

@@ -19,13 +19,11 @@
 		<script src="../../querystring/parse.js"></script>
 		<script src="../../request/request.js"></script>
 		<script src="../../router/router.js"></script>
-		<script src="../limiter.js"></script>
+		<script src="../throttle.js"></script>
 		<script src="../mount.js"></script>
 		<script src="../router.js"></script>
 		
-		<script src="./async.js"></script>
-		
-		<script src="./test-limiter.js"></script>
+		<script src="./test-throttle.js"></script>
 		<script src="./test-mount.js"></script>
 		<script src="./test-router.js"></script>
 		

api/tests/test-mount.js

@@ -2,29 +2,20 @@
 
 var o = require("../../ospec/ospec")
 var domMock = require("../../test-utils/domMock")
-var async = require("./async")
 
 var m = require("../../render/hyperscript")
 var createMounter = require("../mount")
 
 o.spec("m.mount", function() {
+	var FRAME_BUDGET = 1000 / 60
 	var $window, root
 	
 	o.beforeEach(function() {
 		$window = domMock()
-		async.setTimeout($window)
 		root = $window.document.body
 	})
 	
-	o("is a function", function() {
-		o(typeof createMounter).equals("function")
-	})
-	
-	o("returns a function after invocation", function() {
-		o(typeof createMounter()).equals("function")
-	})
-	
-	o("updates passed in redraw object", function() {
+	o("updates redraw object", function() {
 		var redraw = {}
 		var mount = createMounter($window, redraw)
 		
@@ -49,34 +40,7 @@ o.spec("m.mount", function() {
 		o(root.firstChild.nodeName).equals("DIV")
 	})
 	
-	 o("redraws on redraw.run()", function(done) {
-		var onupdate = o.spy()
-		var oninit = o.spy()
-		var redraw = {}
-		var mount = createMounter($window, redraw)
-		
-		mount(root, {
-			view : function() {
-				return m("div", {
-					oninit   : oninit,
-					onupdate : onupdate
-				})
-			}
-		})
-		
-		o(oninit.callCount).equals(1)
-		
-		redraw.run()
-		
-		// Wrapped to give time for the rate-limited redraw to fire
-		setTimeout(function() {
-			o(onupdate.callCount).equals(1)
-			
-			done()
-		}, 20)
-	})
-	
-	o("redraws on events", function(done, timeout) {
+	o("redraws on events", function(done) {
 		var onupdate = o.spy()
 		var oninit   = o.spy()
 		var onclick  = o.spy()
@@ -98,6 +62,7 @@ o.spec("m.mount", function() {
 		root.firstChild.dispatchEvent(e)
 		
 		o(oninit.callCount).equals(1)
+		o(onupdate.callCount).equals(0)
 		
 		o(onclick.callCount).equals(1)
 		o(onclick.this).equals(root.firstChild)
@@ -109,6 +74,34 @@ o.spec("m.mount", function() {
 			o(onupdate.callCount).equals(1)
 			
 			done()
-		}, 20)
+		}, FRAME_BUDGET)
+	})
+	
+	 o("redraws on redraw.run()", function(done) {
+		var onupdate = o.spy()
+		var oninit = o.spy()
+		var redraw = {}
+		var mount = createMounter($window, redraw)
+		
+		mount(root, {
+			view : function() {
+				return m("div", {
+					oninit   : oninit,
+					onupdate : onupdate
+				})
+			}
+		})
+		
+		o(oninit.callCount).equals(1)
+		o(onupdate.callCount).equals(0)
+		
+		redraw.run()
+		
+		// Wrapped to give time for the rate-limited redraw to fire
+		setTimeout(function() {
+			o(onupdate.callCount).equals(1)
+			
+			done()
+		}, FRAME_BUDGET)
 	})
 })

api/tests/test-router.js

@@ -3,189 +3,144 @@
 var o = require("../../ospec/ospec")
 var pushStateMock = require("../../test-utils/pushStateMock")
 var domMock = require("../../test-utils/domMock")
-var async = require("./async")
 
 var m = require("../../render/hyperscript")
-// Convention would be `createRouter`, but that causes variable shadowing bugs
-// in browsers when running tests, so `makeRouter` it is
-var makeRouter = require("../router")
+var router = require("../../api/router")
 
 o.spec("m.route", function() {
-	var $window, root, router
+	var FRAME_BUDGET = 1000 / 60
+	var $window, root, route, redraw
 	
-	void [
-		"setTimeout",
-		"requestAnimationFrame"
-	].forEach(function(timing) {
-		o.spec(timing, function() {
-			void [
-				"#",
-				"?",
-				"#!",
-				"?!",
-				""
-			].forEach(function(prefix) {
-				var spec = prefix ? "prefix " + prefix : "pushstate";
-				
-				o.spec(spec, function() {
-					o.beforeEach(function() {
-						var dom = domMock()
-						var location = pushStateMock()
-						
-						// Generate a DOM + Location mock
-						Object.keys(location).forEach(function(key) {
-							dom[key] = location[key]
-						})
-						
-						$window = dom
-						async[timing]($window)
-						root = $window.document.body
-					})
-					
-					o("is a function", function() {
-						o(typeof makeRouter).equals("function")
-					})
-					
-					o("returns a function after invocation", function() {
-						o(typeof makeRouter($window)).equals("function")
-					})
-					
-					o("updates passed in redraw object", function() {
-						var redraw = {}
-						var router = makeRouter($window, redraw)
-						
-						router.prefix(prefix)
-						
-						router(root, "/", {
-							"/" : {
-								view: function() {
-									return m("div")
-								}
-							}
-						})
-						
-						o(typeof redraw.run).equals("function")
-					})
-					
-					o("renders into `root`", function() {
-						var router = makeRouter($window, {})
-						
-						router.prefix(prefix)
-						
-						router(root, "/", {
-							"/" : {
-								view: function() {
-									return m("div")
-								}
-							}
-						})
-						
-						o(root.firstChild.nodeName).equals("DIV")
-					})
-					
-					o("redraws on redraw.run()", function(done) {
-						var onupdate = o.spy()
-						var oninit = o.spy()
-						var redraw = {}
-						var router = makeRouter($window, redraw)
-						
-						router.prefix(prefix)
-						
-						router(root, "/", {
-							"/" : {
-								view: function() {
-									return m("div", {
-										oninit: oninit,
-										onupdate: onupdate
-									})
-								}
-							}
-						})
-						
-						o(oninit.callCount).equals(1)
-						
-						redraw.run()
-						
-						// Wrapped to give time for the rate-limited redraw to fire
-						setTimeout(function() {
-							o(onupdate.callCount).equals(1)
-							
-							done()
-						}, 20)
-					})
-					
-					o("redraws on events", function(done, timeout) {
-						var onupdate = o.spy()
-						var oninit   = o.spy()
-						var onclick  = o.spy()
-						var router = makeRouter($window, {})
-						var e = $window.document.createEvent("MouseEvents")
-						
-						e.initEvent("click", true, true)
-						
-						router.prefix(prefix)
-						
-						router(root, "/", {
-							"/" : {
-								view: function() {
-									return m("div", {
-										oninit: oninit,
-										onupdate: onupdate,
-										onclick: onclick,
-									})
-								}
-							}
-						})
-						
-						root.firstChild.dispatchEvent(e)
-						
-						o(oninit.callCount).equals(1)
-						
-						o(onclick.callCount).equals(1)
-						o(onclick.this).equals(root.firstChild)
-						o(onclick.args[0].type).equals("click")
-						o(onclick.args[0].target).equals(root.firstChild)
-						
-						// Wrapped to give time for the rate-limited redraw to fire
-						setTimeout(function() {
-							o(onupdate.callCount).equals(1)
-							
-							done()
-						}, 20)
-					})
-					
-					o("changes location on route.link", function() {
-						var router = makeRouter($window, {})
-						var e = $window.document.createEvent("MouseEvents")
-						
-						e.initEvent("click", true, true)
-						
-						router.prefix(prefix)
-						
-						router(root, "/", {
-							"/" : {
-								view: function() {
-									return m("a", {
-										href: "/test",
-										oncreate: router.link
-									})
-								}
-							},
-							"/test" : {
-								view : function() {
-									return m("div")
-								}
-							}
-						})
-						
-						o($window.location.href).equals("http://localhost/" + (prefix ? prefix + "/" : ""))
-						
-						root.firstChild.dispatchEvent(e)
-						
-						o($window.location.href).equals("http://localhost/" + (prefix ? prefix + "/test" : "test"))
-					})
-				})
-			})
+	o.beforeEach(function() {
+		$window = {}
+		
+		var dom = domMock()
+		for (var key in dom) $window[key] = dom[key]
+		
+		var loc = pushStateMock()
+		for (var key in loc) $window[key] = loc[key]
+		
+		root = $window.document.body
+		
+		redraw = {}
+		route = router($window, redraw)
+	})
+	
+	o("updates redraw object", function() {
+		route(root, "/", {
+			"/" : {
+				view: function() {
+					return m("div")
+				}
+			}
 		})
+		
+		o(typeof redraw.run).equals("function")
+	})
+	
+	o("renders into `root`", function() {
+		route(root, "/", {
+			"/" : {
+				view: function() {
+					return m("div")
+				}
+			}
+		})
+		
+		o(root.firstChild.nodeName).equals("DIV")
+	})
+	
+	o("redraws on redraw.run()", function(done) {
+		var onupdate = o.spy()
+		var oninit = o.spy()
+		
+		route(root, "/", {
+			"/" : {
+				view: function() {
+					return m("div", {
+						oninit: oninit,
+						onupdate: onupdate
+					})
+				}
+			}
+		})
+		
+		o(oninit.callCount).equals(1)
+		
+		redraw.run()
+		
+		// Wrapped to give time for the rate-limited redraw to fire
+		setTimeout(function() {
+			o(onupdate.callCount).equals(1)
+			
+			done()
+		}, FRAME_BUDGET)
+	})
+	
+	o("redraws on events", function(done, timeout) {
+		var onupdate = o.spy()
+		var oninit   = o.spy()
+		var onclick  = o.spy()
+		var e = $window.document.createEvent("MouseEvents")
+		
+		e.initEvent("click", true, true)
+		
+		route(root, "/", {
+			"/" : {
+				view: function() {
+					return m("div", {
+						oninit: oninit,
+						onupdate: onupdate,
+						onclick: onclick,
+					})
+				}
+			}
+		})
+		
+		root.firstChild.dispatchEvent(e)
+		
+		o(oninit.callCount).equals(1)
+		
+		o(onclick.callCount).equals(1)
+		o(onclick.this).equals(root.firstChild)
+		o(onclick.args[0].type).equals("click")
+		o(onclick.args[0].target).equals(root.firstChild)
+		
+		// Wrapped to give time for the rate-limited redraw to fire
+		setTimeout(function() {
+			o(onupdate.callCount).equals(1)
+			
+			done()
+		}, FRAME_BUDGET)
+	})
+	
+	o("changes location on route.link", function() {
+		var e = $window.document.createEvent("MouseEvents")
+		
+		e.initEvent("click", true, true)
+		
+		route.prefix("?")
+		
+		route(root, "/", {
+			"/" : {
+				view: function() {
+					return m("a", {
+						href: "/test",
+						oncreate: route.link
+					})
+				}
+			},
+			"/test" : {
+				view : function() {
+					return m("div")
+				}
+			}
+		})
+		
+		o($window.location.href).equals("http://localhost/?/")
+		
+		root.firstChild.dispatchEvent(e)
+		
+		o($window.location.href).equals("http://localhost/?/test")
 	})
 })

api/tests/test-throttle.js

@@ -0,0 +1,84 @@
+"use strict"
+
+var o = require("../../ospec/ospec")
+var callAsync = require("../../test-utils/callAsync")
+var throttle = require("../../api/throttle")
+
+o.spec("throttle", function() {
+	var FRAME_BUDGET = 1000 / 60
+	var spy, throttled
+	o.beforeEach(function() {
+		spy = o.spy()
+		throttled = throttle(spy)
+	})
+	
+	o("runs first call synchronously", function() {
+		throttled()
+		
+		o(spy.callCount).equals(1)
+	})
+	
+	o("throttles subsequent synchronous calls", function(done) {
+		throttled()
+		throttled()
+		
+		o(spy.callCount).equals(1)
+		
+		setTimeout(function() {
+			o(spy.callCount).equals(2)
+			
+			done()
+		}, FRAME_BUDGET) //this delay is much higher than 16.6ms due to setTimeout clamp and other runtime costs
+	})
+	
+	o("calls after threshold", function(done) {
+		throttled()
+		
+		o(spy.callCount).equals(1)
+		
+		setTimeout(function(t) {
+			throttled()
+			
+			o(spy.callCount).equals(2)
+			
+			done()
+		}, FRAME_BUDGET)
+		
+	})
+	
+	o("throttles before threshold", function(done) {
+		throttled()
+		
+		o(spy.callCount).equals(1)
+			
+		callAsync(function(t) {
+			throttled()
+			
+			o(spy.callCount).equals(1)
+			
+			done()
+		})
+	})
+			
+	o("it only runs once per tick", function(done) {
+		throttled()
+		throttled()
+		throttled()
+		
+		o(spy.callCount).equals(1)
+		
+		setTimeout(function() {
+			o(spy.callCount).equals(2)
+			
+			done()
+		}, FRAME_BUDGET)
+	})
+	
+	o("it supports forcing a synchronous redraw", function() {
+		throttled()
+		throttled()
+		throttled(true)
+		
+		o(spy.callCount).equals(2)
+	})
+})

api/throttle.js

@@ -0,0 +1,23 @@
+"use strict"
+
+module.exports = function(callback) {
+	//60fps translates to 16.6ms, round it down since setTimeout requires int
+	var time  = 16
+	var last = 0, pending = null
+	var timeout = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout
+	return function(synchronous) {
+		var now = new Date().getTime()
+		var diff = now - last
+		if (synchronous === true || last === 0 || now - last >= time) {
+			last = now
+			callback()
+		}
+		else if (pending === null) {
+			pending = timeout(function() {
+				pending = 0
+				callback()
+				last = new Date().getTime()
+			}, time - (now - last))
+		}
+	}
+}