premasagar · September 24, 2011 00:47 · Aug 2, 2011 · Aug 2, 2011 · Aug 2, 2011 · Aug 2, 2011
diff --git a/animLoopX.js b/animLoopX.js
@@ -19,7 +19,7 @@ window.animLoop = function( render, element ) {
       // - setTimeout returns the actual timeout
       now = now && now > 1E4 ? now : +new Date;
       var deltaT = now - lastFrame;
-      // skip a frame when deltaT is too high
+      // do not render frame when deltaT is too high
       if ( deltaT < 160 ) {
         running = render( deltaT, lastFrame = now );
       }

diff --git a/animLoop_fixed.js b/animLoop_fixed.js
@@ -5,7 +5,7 @@ function animLoop( render, element ) {
         if ( running !== false ) {
             requestAnimationFrame( loop, element );
             var deltaT = now - lastFrame;
-            // skip a frame when deltaT is too high
+            // do not render frame when deltaT is too high
             if ( deltaT < 160 ) {
                 running = render( deltaT );
             }

diff --git a/intervalLoop_constant.js b/intervalLoop_constant.js
@@ -0,0 +1,15 @@
+var elem = document.getElementById("animatedElem"),
+  left = 0,
+  lastFrame = +new Date,
+  timer;
+// Move the element on the right at ~600px/s
+timer = setInterval(function() {
+  var now = +new Date,
+    deltaT = now - lastFrame;
+  elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
+  lastFrame = now;
+  // clear the timer at 400px to stop the animation
+  if ( left > 400 ) {
+    clearInterval( timer );
+  }
+}, 16);
diff --git a/animLoop.js b/animLoop.js
@@ -1,20 +0,0 @@
-function animLoop( render, element ) {
-    var running;
-    function loop() {
-        // stop if previous render returned false
-        if ( running !== false ) {
-            requestAnimationFrame( loop, element );
-            running = render();
-        }
-    }
-    loop();
-}
-
-// Usage
-animLoop(function() {
-    elem.style.left = ( left += 10 ) + "px";
-    if ( left > 400 ) {
-      return false;
-    }
-// optional 2nd arg: elem containing the animation
-}, animWrapper );

diff --git a/animLoop_constant.js b/animLoop_constant.js
@@ -1,15 +0,0 @@
-var elem = document.getElementById("animatedElem"),
-  left = 0,
-  lastFrame = +new Date,
-  timer;
-// Move the element on the right at ~600px/s
-timer = setInterval(function() {
-  var now = +new Date,
-    deltaT = now - lastFrame;
-  elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
-  lastFrame = now;
-  // clear the timer at 400px to stop the animation
-  if ( left > 400 ) {
-    clearInterval( timer );
-  }
-}, 16);

diff --git a/animLoop_raf.js b/animLoop_raf.js
@@ -0,0 +1,21 @@
+function animLoop( render, element ) {
+    var running, lastFrame = +new Date;
+    function loop( now ) {
+        // stop the loop if render returned false
+        if ( running !== false ) {
+            requestAnimationFrame( loop, element );
+            running = render( now - lastFrame );
+            lastFrame = now;
+        }
+    }
+    loop( lastFrame );
+}
+
+// Usage
+animLoop(function( deltaT ) {
+    elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
+    if ( left > 400 ) {
+      return false;
+    }
+// optional 2nd arg: elem containing the animation
+}, animWrapper );
diff --git a/animLoop_constant.js b/animLoop_constant.js
@@ -1,20 +1,15 @@
-function animLoop( render, element ) {
-    var running, lastFrame = +new Date;
-    function loop( now ) {
-        // stop the loop if render returned false
-        if ( running !== false ) {
-            requestAnimationFrame( loop, element );
-            running = render( now - lastFrame );
-            lastFrame = now;
-        }
-    }
-    loop( lastFrame );
-}
-
+var elem = document.getElementById("animatedElem"),
+  left = 0,
+  lastFrame = +new Date,
+  timer;
 // Move the element on the right at ~600px/s
-animLoop(function( deltaT ) {
+timer = setInterval(function() {
+  var now = +new Date,
+    deltaT = now - lastFrame;
   elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
+  lastFrame = now;
+  // clear the timer at 400px to stop the animation
   if ( left > 400 ) {
-    return false;
+    clearInterval( timer );
   }
-});
+}, 16);
diff --git a/animLoopX.js b/animLoopX.js
@@ -1,5 +1,5 @@
 // Cross browser, backward compatible solution
-(function() {
+(function( window, Date ) {
 // feature testing
 var raf = window.mozRequestAnimationFrame    ||
           window.webkitRequestAnimationFrame ||
@@ -27,7 +27,7 @@ window.animLoop = function( render, element ) {
   }
   loop();
 };
-})();
+})( window, Date );
 
 // Usage
 animLoop(function( deltaT, now ) {

diff --git a/animLoopX.js b/animLoopX.js
@@ -20,7 +20,7 @@ window.animLoop = function( render, element ) {
       now = now && now > 1E4 ? now : +new Date;
       var deltaT = now - lastFrame;
       // skip a frame when deltaT is too high
-      if ( deltaT > 160 ) {
+      if ( deltaT < 160 ) {
         running = render( deltaT, lastFrame = now );
       }
     }

diff --git a/animLoop_fixed.js b/animLoop_fixed.js
@@ -6,7 +6,7 @@ function animLoop( render, element ) {
             requestAnimationFrame( loop, element );
             var deltaT = now - lastFrame;
             // skip a frame when deltaT is too high
-            if ( deltaT > 160 ) {
+            if ( deltaT < 160 ) {
                 running = render( deltaT );
             }
             lastFrame = now;

diff --git a/animLoopX.js b/animLoopX.js
@@ -18,7 +18,11 @@ window.animLoop = function( render, element ) {
       // - Chrome 10 doesn't return it at all
       // - setTimeout returns the actual timeout
       now = now && now > 1E4 ? now : +new Date;
-      running = render( now - lastFrame, lastFrame = now );
+      var deltaT = now - lastFrame;
+      // skip a frame when deltaT is too high
+      if ( deltaT > 160 ) {
+        running = render( deltaT, lastFrame = now );
+      }
     }
   }
   loop();

diff --git a/animLoop_fixed.js b/animLoop_fixed.js
@@ -0,0 +1,16 @@
+function animLoop( render, element ) {
+    var running, lastFrame = +new Date;
+    function loop( now ) {
+        // stop the loop if render returned false
+        if ( running !== false ) {
+            requestAnimationFrame( loop, element );
+            var deltaT = now - lastFrame;
+            // skip a frame when deltaT is too high
+            if ( deltaT > 160 ) {
+                running = render( deltaT );
+            }
+            lastFrame = now;
+        }
+    }
+    loop( lastFrame );
+}
diff --git a/animLoop.js b/animLoop.js
@@ -1,14 +1,20 @@
 function animLoop( render, element ) {
-    function loop( now ) {
-        requestAnimationFrame( loop, element );
-        render( now );
+    var running;
+    function loop() {
+        // stop if previous render returned false
+        if ( running !== false ) {
+            requestAnimationFrame( loop, element );
+            running = render();
+        }
     }
-    loop( +new Date );
+    loop();
 }
 
 // Usage
-animLoop(function( now ) {
-    // rendering code goes here
-    ...
+animLoop(function() {
+    elem.style.left = ( left += 10 ) + "px";
+    if ( left > 400 ) {
+      return false;
+    }
 // optional 2nd arg: elem containing the animation
 }, animWrapper );
diff --git a/animLoopConstant.js → animLoop_constant.js b/animLoopConstant.js → animLoop_constant.js
@@ -8,12 +8,9 @@ function animLoop( render, element ) {
             lastFrame = now;
         }
     }
-    loop( +new Date );
+    loop( lastFrame );
 }
 
-// Updated example
-var elem = document.getElementById("animatedElem"),
-  left = 0;
 // Move the element on the right at ~600px/s
 animLoop(function( deltaT ) {
   elem.style.left = ( left += 10 * deltaT / 16 ) + "px";

diff --git a/animLoopConstant.js b/animLoopConstant.js
@@ -11,10 +11,9 @@ function animLoop( render, element ) {
     loop( +new Date );
 }
 
-// Example
+// Updated example
 var elem = document.getElementById("animatedElem"),
-  left = 0,
-  timer;
+  left = 0;
 // Move the element on the right at ~600px/s
 animLoop(function( deltaT ) {
   elem.style.left = ( left += 10 * deltaT / 16 ) + "px";

diff --git a/animLoop.js b/animLoop.js
@@ -1,4 +1,4 @@
-function animLoop( render, element ){
+function animLoop( render, element ) {
     function loop( now ) {
         requestAnimationFrame( loop, element );
         render( now );

diff --git a/animLoopConstant.js b/animLoopConstant.js
@@ -1,13 +1,24 @@
-function animLoop( render, element ){
-    var lastFrame = +new Date;
+function animLoop( render, element ) {
+    var running, lastFrame = +new Date;
     function loop( now ) {
-        requestAnimationFrame( loop, element );
-        render( now - lastFrame );
+        // stop the loop if render returned false
+        if ( running !== false ) {
+            requestAnimationFrame( loop, element );
+            running = render( now - lastFrame );
+            lastFrame = now;
+        }
     }
     loop( +new Date );
 }
 
-// Usage
+// Example
+var elem = document.getElementById("animatedElem"),
+  left = 0,
+  timer;
+// Move the element on the right at ~600px/s
 animLoop(function( deltaT ) {
-    ...
-}, animWrapper );
+  elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
+  if ( left > 400 ) {
+    return false;
+  }
+});
diff --git a/animLoopX.js b/animLoopX.js
@@ -14,18 +14,19 @@ window.animLoop = function( render, element ) {
         raf( loop, element ) :
         // fallback to setTimeout
         setTimeout( loop, 16 );
-      // Make sure to always return a valid time, since:
+      // Make sure to use a valid time, since:
       // - Chrome 10 doesn't return it at all
       // - setTimeout returns the actual timeout
-      running = render( now = ( now && now > 1E4 ? now : +new Date ), now - lastFrame );
+      now = now && now > 1E4 ? now : +new Date;
+      running = render( now - lastFrame, lastFrame = now );
     }
   }
   loop();
 };
 })();
 
 // Usage
-animLoop(function( now ) {
+animLoop(function( deltaT, now ) {
     // rendering code goes here
     // return false; will stop the loop
     ...

diff --git a/animLoop.js b/animLoop.js
@@ -1,13 +1,13 @@
 function animLoop( render, element ){
     function loop( now ) {
         requestAnimationFrame( loop, element );
-        render( now || +new Date );
+        render( now );
     }
-    loop();
+    loop( +new Date );
 }
 
 // Usage
-animLoop(function() {
+animLoop(function( now ) {
     // rendering code goes here
     ...
 // optional 2nd arg: elem containing the animation

diff --git a/animLoopConstant.js b/animLoopConstant.js
@@ -0,0 +1,13 @@
+function animLoop( render, element ){
+    var lastFrame = +new Date;
+    function loop( now ) {
+        requestAnimationFrame( loop, element );
+        render( now - lastFrame );
+    }
+    loop( +new Date );
+}
+
+// Usage
+animLoop(function( deltaT ) {
+    ...
+}, animWrapper );
diff --git a/animLoopX.js b/animLoopX.js
@@ -7,7 +7,7 @@ var raf = window.mozRequestAnimationFrame    ||
           window.oRequestAnimationFrame;
 
 window.animLoop = function( render, element ) {
-  var running;
+  var running, lastFrame = +new Date;
   function loop( now ) {
     if ( running !== false ) {
       raf ?
@@ -17,7 +17,7 @@ window.animLoop = function( render, element ) {
       // Make sure to always return a valid time, since:
       // - Chrome 10 doesn't return it at all
       // - setTimeout returns the actual timeout
-      running = render( now && now > 1E4 ? now : +new Date );
+      running = render( now = ( now && now > 1E4 ? now : +new Date ), now - lastFrame );
     }
   }
   loop();

diff --git a/animLoopX.min.js b/animLoopX.min.js
@@ -1,2 +0,0 @@
-// minified to 208B, to see if it was tweetable, but :-(
-(function(b,a){a="RequestAnimationFrame";a=b["moz"+a]||b["webkit"+a]||b["ms"+a]||b["o"+a];b.animLoop=function(b,f,e){function c(d){e!==!1&&(a?a(c,f):setTimeout(c,16),e=b(d&&d>1E4?d:+new Date))}c()}})(window);

diff --git a/animLoopX.js b/animLoopX.js
@@ -14,13 +14,13 @@ window.animLoop = function( render, element ) {
         raf( loop, element ) :
         // fallback to setTimeout
         setTimeout( loop, 16 );
-        // Make sure to always return a valid time, since:
-        // - Chrome 10 doesn't return it at all
-        // - setTimeout returns the actual timeout
-        running = render( now && now > 1E4 ? now : +new Date );
-      }
+      // Make sure to always return a valid time, since:
+      // - Chrome 10 doesn't return it at all
+      // - setTimeout returns the actual timeout
+      running = render( now && now > 1E4 ? now : +new Date );
     }
-    loop();
+  }
+  loop();
 };
 })();
 

diff --git a/animLoopX.min.js b/animLoopX.min.js
@@ -0,0 +1,2 @@
+// minified to 208B, to see if it was tweetable, but :-(
+(function(b,a){a="RequestAnimationFrame";a=b["moz"+a]||b["webkit"+a]||b["ms"+a]||b["o"+a];b.animLoop=function(b,f,e){function c(d){e!==!1&&(a?a(c,f):setTimeout(c,16),e=b(d&&d>1E4?d:+new Date))}c()}})(window);
diff --git a/animLoopX.js b/animLoopX.js
@@ -0,0 +1,33 @@
+// Cross browser, backward compatible solution
+(function() {
+// feature testing
+var raf = window.mozRequestAnimationFrame    ||
+          window.webkitRequestAnimationFrame ||
+          window.msRequestAnimationFrame     ||
+          window.oRequestAnimationFrame;
+
+window.animLoop = function( render, element ) {
+  var running;
+  function loop( now ) {
+    if ( running !== false ) {
+      raf ?
+        raf( loop, element ) :
+        // fallback to setTimeout
+        setTimeout( loop, 16 );
+        // Make sure to always return a valid time, since:
+        // - Chrome 10 doesn't return it at all
+        // - setTimeout returns the actual timeout
+        running = render( now && now > 1E4 ? now : +new Date );
+      }
+    }
+    loop();
+};
+})();
+
+// Usage
+animLoop(function( now ) {
+    // rendering code goes here
+    // return false; will stop the loop
+    ...
+// optional 2nd arg: elem containing the animation
+}, animWrapper );
diff --git a/animLoop.js b/animLoop.js
@@ -9,4 +9,6 @@ function animLoop( render, element ){
 // Usage
 animLoop(function() {
     // rendering code goes here
-}, document.getElementById("animationWrapper") );
+    ...
+// optional 2nd arg: elem containing the animation
+}, animWrapper );
diff --git a/animLoop.js b/animLoop.js
@@ -9,4 +9,4 @@ function animLoop( render, element ){
 // Usage
 animLoop(function() {
     // rendering code goes here
-});
+}, document.getElementById("animationWrapper") );
diff --git a/animLoop.js b/animLoop.js
@@ -0,0 +1,12 @@
+function animLoop( render, element ){
+    function loop( now ) {
+        requestAnimationFrame( loop, element );
+        render( now || +new Date );
+    }
+    loop();
+}
+
+// Usage
+animLoop(function() {
+    // rendering code goes here
+});
Original file line number	Diff line number	Diff line change
		@@ -1,2 +0,0 @@
		// minified to 208B, to see if it was tweetable, but :-(
		(function(b,a){a="RequestAnimationFrame";a=b["moz"+a]\|\|b["webkit"+a]\|\|b["ms"+a]\|\|b["o"+a];b.animLoop=function(b,f,e){function c(d){e!==!1&&(a?a(c,f):setTimeout(c,16),e=b(d&&d>1E4?d:+new Date))}c()}})(window);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// minified to 208B, to see if it was tweetable, but :-(
		(function(b,a){a="RequestAnimationFrame";a=b["moz"+a]\|\|b["webkit"+a]\|\|b["ms"+a]\|\|b["o"+a];b.animLoop=function(b,f,e){function c(d){e!==!1&&(a?a(c,f):setTimeout(c,16),e=b(d&&d>1E4?d:+new Date))}c()}})(window);