jeongsd · March 5, 2017 13:59 · Apr 22, 2013 · Apr 22, 2013 · Apr 22, 2013 · Apr 22, 2013
diff --git a/limitLoop.js b/limitLoop.js
@@ -59,8 +59,8 @@ var limitLoop = function (fn, fps) {
             // using then = now, which can end up lowering overall fps
             then = now - (delta % interval);
 
-            // call the fn, passing current fps to it
-            fn(frames);
+            // call the fn
+            fn();
         }
     }(0));
 };
diff --git a/test.js b/test.js
@@ -1,5 +1,5 @@
 /*
-Feel free to play with this over at http://jsfiddle.net/addyo/Y8P6S/.
+Feel free to play with this over at http://jsfiddle.net/addyo/Y8P6S/1/.
 You can either use the Chrome DevTools Timeline or FPS counter to confirm
 if you're hitting a consistent fps.
 */

diff --git a/limitLoop.js b/limitLoop.js
@@ -41,29 +41,24 @@ var limitLoop = function (fn, fps) {
     // Use var then = Date.now(); if you
     // don't care about targetting < IE9
     var then = new Date().getTime();
-    var oldtime = 0;
-
+
     // custom fps, otherwise fallback to 60
     fps = fps || 60;
-
-    return (function loop(time) {
+    var interval = 1000 / fps;
+
+    return (function loop(time){
         requestAnimationFrame(loop);
-
-        var interval = 1000 / (this.fps || fps);
+
         // again, Date.now() if it's available
         var now = new Date().getTime();
         var delta = now - then;
-
+ 
         if (delta > interval) {
             // Update time
             // now - (delta % interval) is an improvement over just 
             // using then = now, which can end up lowering overall fps
             then = now - (delta % interval);
-
-            // calculate fps
-            var frames = 1000 / (time - oldtime)
-            oldtime = time;
-
+
             // call the fn, passing current fps to it
             fn(frames);
         }

diff --git a/limitLoop.js b/limitLoop.js
@@ -37,7 +37,9 @@ http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
 */
 
 var limitLoop = function (fn, fps) {
-
+
+    // Use var then = Date.now(); if you
+    // don't care about targetting < IE9
     var then = new Date().getTime();
     var oldtime = 0;
 
@@ -48,6 +50,7 @@ var limitLoop = function (fn, fps) {
         requestAnimationFrame(loop);
 
         var interval = 1000 / (this.fps || fps);
+        // again, Date.now() if it's available
         var now = new Date().getTime();
         var delta = now - then;
 

diff --git a/limitLoop.js b/limitLoop.js
@@ -10,6 +10,12 @@ occasionally hitting 60fps. Use this trick to target a specific frame-
 rate (e.g 30fps, 48fps) until browsers better tackle this problem 
 natively.
 
+Please ensure that if you're using this workaround, you've done your best
+to find and optimize the performance bottlenecks in your application first.
+60fps should be an attainable goal. If however you've tried your best and
+are still not getting the desired frame-rate, see if you can get some mileage
+with it.
+
 This type of trick works better when you know you have a fixed amount
 of work to be done and it will always take longer than 16.6ms. It doesn't
 work as well when your workload is somewhat variable.

diff --git a/limitLoop.js b/limitLoop.js
@@ -3,7 +3,7 @@
 limitLoop.js - limit the frame-rate when using requestAnimation frame
 Released under an MIT license.
 
-Why use it?
+When to use it?
 ----------------
 A consistent frame-rate can be better than a janky experience only 
 occasionally hitting 60fps. Use this trick to target a specific frame-

diff --git a/limitLoop.js b/limitLoop.js
@@ -7,7 +7,8 @@ Why use it?
 ----------------
 A consistent frame-rate can be better than a janky experience only 
 occasionally hitting 60fps. Use this trick to target a specific frame-
-rate (e.g 30fps, 48fps).
+rate (e.g 30fps, 48fps) until browsers better tackle this problem 
+natively.
 
 This type of trick works better when you know you have a fixed amount
 of work to be done and it will always take longer than 16.6ms. It doesn't

diff --git a/limitLoop.js b/limitLoop.js
@@ -29,18 +29,6 @@ http://cssdeck.com/labs/embed/gvxnxdrh/0/output
 http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
 */
 
-// rAF
-window.requestAnimationFrame = function() {
-    return window.requestAnimationFrame ||
-		window.webkitRequestAnimationFrame ||
-		window.mozRequestAnimationFrame ||
-		window.msRequestAnimationFrame ||
-		window.oRequestAnimationFrame ||
-		function(f) {
-			window.setTimeout(f,1e3/60);
-		}
-}();
-
 var limitLoop = function (fn, fps) {
 
     var then = new Date().getTime();

diff --git a/test.js b/test.js
@@ -4,6 +4,18 @@ You can either use the Chrome DevTools Timeline or FPS counter to confirm
 if you're hitting a consistent fps.
 */
 
+// rAF normalization
+window.requestAnimationFrame = function() {
+    return window.requestAnimationFrame ||
+       	window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		function(f) {
+			window.setTimeout(f,1e3/60);
+		}
+}();
+
 // define a reference to the canvas's 2D context
 var context = television.getContext('2d');
 

diff --git a/limitLoop.js b/limitLoop.js
@@ -27,7 +27,6 @@ Prior art / inspiration
 ------------------------
 http://cssdeck.com/labs/embed/gvxnxdrh/0/output
 http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
-and the comment by Yannick Albert
 */
 
 // rAF
@@ -44,10 +43,11 @@ window.requestAnimationFrame = function() {
 
 var limitLoop = function (fn, fps) {
 
-    var defaultFps = 60;
     var then = new Date().getTime();
     var oldtime = 0;
-    fps = fps || defaultFps;
+
+    // custom fps, otherwise fallback to 60
+    fps = fps || 60;
 
     return (function loop(time) {
         requestAnimationFrame(loop);
@@ -57,14 +57,16 @@ var limitLoop = function (fn, fps) {
         var delta = now - then;
 
         if (delta > interval) {
-            // update time 
+            // Update time
+            // now - (delta % interval) is an improvement over just 
+            // using then = now, which can end up lowering overall fps
             then = now - (delta % interval);
 
             // calculate fps
             var frames = 1000 / (time - oldtime)
             oldtime = time;
 
-            // call the fn, pass current fps to it
+            // call the fn, passing current fps to it
             fn(frames);
         }
     }(0));

diff --git a/limitLoop.js b/limitLoop.js
@@ -1,6 +1,7 @@
 /*
 
 limitLoop.js - limit the frame-rate when using requestAnimation frame
+Released under an MIT license.
 
 Why use it?
 ----------------

diff --git a/limitLoop.js b/limitLoop.js
@@ -8,6 +8,11 @@ A consistent frame-rate can be better than a janky experience only
 occasionally hitting 60fps. Use this trick to target a specific frame-
 rate (e.g 30fps, 48fps).
 
+This type of trick works better when you know you have a fixed amount
+of work to be done and it will always take longer than 16.6ms. It doesn't
+work as well when your workload is somewhat variable.
+
+
 Solution
 ----------------
 

diff --git a/test.js b/test.js
@@ -33,44 +33,4 @@ function drawStatic() {
 };
 
 
-// rAF
-window.requestAnimationFrame = function() {
-    return window.requestAnimationFrame ||
-    	window.webkitRequestAnimationFrame ||
-		window.mozRequestAnimationFrame ||
-		window.msRequestAnimationFrame ||
-		window.oRequestAnimationFrame ||
-		function(f) {
-			window.setTimeout(f,1e3/60);
-		}
-}();
-
-var limitLoop = function (fn, fps) {
-
-    var defaultFps = 60;
-    var then = new Date().getTime();
-    var oldtime = 0;
-    fps = fps || defaultFps;
-
-    return (function loop(time) {
-        requestAnimationFrame(loop);
-
-        var interval = 1000 / (this.fps || fps);
-        var now = new Date().getTime();
-        var delta = now - then;
-
-        if (delta > interval) {
-            // update time 
-            then = now - (delta % interval);
-
-            // calculate fps
-            var frames = 1000 / (time - oldtime)
-            oldtime = time;
-
-            // call the fn, pass current fps to it
-            fn(frames);
-        }
-    }(0));
-};
-
 limitLoop(drawStatic, 30);
diff --git a/test.js b/test.js
@@ -1,13 +1,76 @@
-var set;
-document.onclick = function () {
-    set = true;
+/*
+Feel free to play with this over at http://jsfiddle.net/addyo/Y8P6S/.
+You can either use the Chrome DevTools Timeline or FPS counter to confirm
+if you're hitting a consistent fps.
+*/
+
+// define a reference to the canvas's 2D context
+var context = television.getContext('2d');
+
+// create a buffer to hold the pixel data
+var pixelBuffer = context.createImageData(television.width, television.height);
+
+function drawStatic() {
+        var color,
+            data = pixelBuffer.data,
+            index = 0,
+            len = data.length;
+
+        while (index < len) {
+            // choose a random grayscale color
+            color = Math.floor(Math.random() * 0xff);
+
+            // red, green and blue are set to the same color
+            // to result in a random gray pixel
+            data[index++] = data[index++] = data[index++] = color;
+            // the fourth multiple is always completely opaque
+            data[index++] = 0xff; // alpha
+        }
+
+        // flush our pixel buffer to the canvas
+        context.putImageData(pixelBuffer, 0, 0);
+
 };
 
-function test(fps) {
-    if (set) {
-        this.fps = 15;
-    }
-    console.log(fps);
-}
 
-limitLoop(test, 30);
+// rAF
+window.requestAnimationFrame = function() {
+    return window.requestAnimationFrame ||
+    	window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		function(f) {
+			window.setTimeout(f,1e3/60);
+		}
+}();
+
+var limitLoop = function (fn, fps) {
+
+    var defaultFps = 60;
+    var then = new Date().getTime();
+    var oldtime = 0;
+    fps = fps || defaultFps;
+
+    return (function loop(time) {
+        requestAnimationFrame(loop);
+
+        var interval = 1000 / (this.fps || fps);
+        var now = new Date().getTime();
+        var delta = now - then;
+
+        if (delta > interval) {
+            // update time 
+            then = now - (delta % interval);
+
+            // calculate fps
+            var frames = 1000 / (time - oldtime)
+            oldtime = time;
+
+            // call the fn, pass current fps to it
+            fn(frames);
+        }
+    }(0));
+};
+
+limitLoop(drawStatic, 30);
diff --git a/limitLoop.js b/limitLoop.js
@@ -24,6 +24,18 @@ http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
 and the comment by Yannick Albert
 */
 
+// rAF
+window.requestAnimationFrame = function() {
+    return window.requestAnimationFrame ||
+		window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		function(f) {
+			window.setTimeout(f,1e3/60);
+		}
+}();
+
 var limitLoop = function (fn, fps) {
 
     var defaultFps = 60;

diff --git a/limitLoop.js b/limitLoop.js
@@ -0,0 +1,53 @@
+/*
+
+limitLoop.js - limit the frame-rate when using requestAnimation frame
+
+Why use it?
+----------------
+A consistent frame-rate can be better than a janky experience only 
+occasionally hitting 60fps. Use this trick to target a specific frame-
+rate (e.g 30fps, 48fps).
+
+Solution
+----------------
+
+When we draw, deduct the last frame's execution time from the current 
+time to see if the time elapsed since the last frame is more than the 
+fps-based interval or not. Should the condition evaluate to true, set 
+the time for the current frame which will be the last frame execution 
+time in the next drawing call.
+
+Prior art / inspiration
+------------------------
+http://cssdeck.com/labs/embed/gvxnxdrh/0/output
+http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
+and the comment by Yannick Albert
+*/
+
+var limitLoop = function (fn, fps) {
+
+    var defaultFps = 60;
+    var then = new Date().getTime();
+    var oldtime = 0;
+    fps = fps || defaultFps;
+
+    return (function loop(time) {
+        requestAnimationFrame(loop);
+
+        var interval = 1000 / (this.fps || fps);
+        var now = new Date().getTime();
+        var delta = now - then;
+
+        if (delta > interval) {
+            // update time 
+            then = now - (delta % interval);
+
+            // calculate fps
+            var frames = 1000 / (time - oldtime)
+            oldtime = time;
+
+            // call the fn, pass current fps to it
+            fn(frames);
+        }
+    }(0));
+};
diff --git a/test.js b/test.js
@@ -0,0 +1,13 @@
+var set;
+document.onclick = function () {
+    set = true;
+};
+
+function test(fps) {
+    if (set) {
+        this.fps = 15;
+    }
+    console.log(fps);
+}
+
+limitLoop(test, 30);