Decouple the scroll event from _scrollPage function using requestAnimationFrame.

pazguille · pazguille · commit 9225c07c17be · 2014-04-17T14:29:04.000-03:00
diff --git a/dist/scrollReveal.js b/dist/scrollReveal.js
@@ -39,6 +39,20 @@ window.scrollReveal = (function (window) {
 
   'use strict';
 
+  /**
+   * RequestAnimationFrame polyfill
+   * @function
+   * @private
+   */
+  var requestAnimFrame = (function () {
+    return window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      function (callback) {
+        window.setTimeout(callback, 1000 / 60);
+    };
+  }());
+
   function scrollReveal(options) {
 
       this.docElem = window.document.documentElement;
@@ -90,12 +104,13 @@ window.scrollReveal = (function (window) {
         self.update(el);
       });
 
-      var scrollHandler = function () {
+      var scrollHandler = function (e) {
+        // No changing, exit
         if (!self.scrolled) {
           self.scrolled = true;
-          setTimeout(function () {
-            self._scrollPage();
-          }, 60);
+          requestAnimFrame(function () {
+            self._scrollPage
+          });
         }
       };
 
@@ -112,6 +127,7 @@ window.scrollReveal = (function (window) {
         self.resizeTimeout = setTimeout(delayed, 200);
       };
 
+      // captureScroll
       window.addEventListener('scroll', scrollHandler, false);
       window.addEventListener('resize', resizeHandler, false);
     },
diff --git a/dist/scrollReveal.min.js b/dist/scrollReveal.min.js
diff --git a/scrollReveal.js b/scrollReveal.js
@@ -28,6 +28,20 @@ window.scrollReveal = (function (window) {
 
   'use strict';
 
+  /**
+   * RequestAnimationFrame polyfill
+   * @function
+   * @private
+   */
+  var requestAnimFrame = (function () {
+    return window.requestAnimationFrame ||
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      function (callback) {
+        window.setTimeout(callback, 1000 / 60);
+    };
+  }());
+
   function scrollReveal(options) {
 
       this.docElem = window.document.documentElement;
@@ -79,12 +93,13 @@ window.scrollReveal = (function (window) {
         self.update(el);
       });
 
-      var scrollHandler = function () {
+      var scrollHandler = function (e) {
+        // No changing, exit
         if (!self.scrolled) {
           self.scrolled = true;
-          setTimeout(function () {
-            self._scrollPage();
-          }, 60);
+          requestAnimFrame(function () {
+            self._scrollPage
+          });
         }
       };
 
@@ -101,6 +116,7 @@ window.scrollReveal = (function (window) {
         self.resizeTimeout = setTimeout(delayed, 200);
       };
 
+      // captureScroll
       window.addEventListener('scroll', scrollHandler, false);
       window.addEventListener('resize', resizeHandler, false);
     },
