Merge pull request #54 from raphaeleidus/35_throttle_2

toddmotto · toddmotto · commit dee0bb698c3b · 2014-06-17T17:04:36.000+01:00
implement true throttling
diff --git a/README.md b/README.md
@@ -73,6 +73,11 @@ Type: `Number|String` Default: `250`
 
 The throttle is managed by an internal function that prevents performance issues from continuous firing of `window.onscroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds.
 
+#### debounce
+Type: `Boolean` Default: `true`
+
+By default the throttling function is actually a [debounce](http://underscorejs.org/#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the images every `throttle` milliseconds, set `debounce` to `false`.
+
 #### unload
 Type: `Boolean` Default: `false`
 
diff --git a/dist/echo.js b/dist/echo.js
@@ -1,7 +1,9 @@
 /*! echo.js v1.6.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/echo */
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
-    define(factory);
+    define(function() {
+      return factory(root);
+    });
   } else if (typeof exports === 'object') {
     module.exports = factory;
   } else {
@@ -15,16 +17,22 @@
 
   var callback = function () {};
 
-  var offset, poll, throttle, unload;
+  var offset, poll, delay, useDebounce, unload;
 
   var inView = function (element, view) {
     var box = element.getBoundingClientRect();
     return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
   };
 
-  var debounce = function () {
+  var debounceOrThrottle = function () {
+    if(!useDebounce && !!poll) {
+      return;
+    }
     clearTimeout(poll);
-    poll = setTimeout(echo.render, throttle);
+    poll = setTimeout(function(){
+      echo.render();
+      poll = null;
+    }, delay);
   };
 
   echo.init = function (opts) {
@@ -41,16 +49,17 @@
       l: optionToInt(opts.offsetLeft, offsetHorizontal),
       r: optionToInt(opts.offsetRight, offsetHorizontal)
     };
-    throttle = optionToInt(opts.throttle, 250);
+    delay = optionToInt(opts.throttle, 250);
+    useDebounce = opts.debounce !== false;
     unload = !!opts.unload;
     callback = opts.callback || callback;
     echo.render();
     if (document.addEventListener) {
-      root.addEventListener('scroll', debounce, false);
-      root.addEventListener('load', debounce, false);
+      root.addEventListener('scroll', debounceOrThrottle, false);
+      root.addEventListener('load', debounceOrThrottle, false);
     } else {
-      root.attachEvent('onscroll', debounce);
-      root.attachEvent('onload', debounce);
+      root.attachEvent('onscroll', debounceOrThrottle);
+      root.attachEvent('onload', debounceOrThrottle);
     }
   };
 
@@ -88,9 +97,9 @@
 
   echo.detach = function () {
     if (document.removeEventListener) {
-      root.removeEventListener('scroll', debounce);
+      root.removeEventListener('scroll', debounceOrThrottle);
     } else {
-      root.detachEvent('onscroll', debounce);
+      root.detachEvent('onscroll', debounceOrThrottle);
     }
     clearTimeout(poll);
   };
diff --git a/dist/echo.min.js b/dist/echo.min.js
diff --git a/src/echo.js b/src/echo.js
@@ -1,7 +1,7 @@
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     define(function() {
-      return factory(root)
+      return factory(root);
     });
   } else if (typeof exports === 'object') {
     module.exports = factory;
@@ -16,16 +16,22 @@
 
   var callback = function () {};
 
-  var offset, poll, throttle, unload;
+  var offset, poll, delay, useDebounce, unload;
 
   var inView = function (element, view) {
     var box = element.getBoundingClientRect();
     return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
   };
 
-  var debounce = function () {
+  var debounceOrThrottle = function () {
+    if(!useDebounce && !!poll) {
+      return;
+    }
     clearTimeout(poll);
-    poll = setTimeout(echo.render, throttle);
+    poll = setTimeout(function(){
+      echo.render();
+      poll = null;
+    }, delay);
   };
 
   echo.init = function (opts) {
@@ -42,16 +48,17 @@
       l: optionToInt(opts.offsetLeft, offsetHorizontal),
       r: optionToInt(opts.offsetRight, offsetHorizontal)
     };
-    throttle = optionToInt(opts.throttle, 250);
+    delay = optionToInt(opts.throttle, 250);
+    useDebounce = opts.debounce !== false;
     unload = !!opts.unload;
     callback = opts.callback || callback;
     echo.render();
     if (document.addEventListener) {
-      root.addEventListener('scroll', debounce, false);
-      root.addEventListener('load', debounce, false);
+      root.addEventListener('scroll', debounceOrThrottle, false);
+      root.addEventListener('load', debounceOrThrottle, false);
     } else {
-      root.attachEvent('onscroll', debounce);
-      root.attachEvent('onload', debounce);
+      root.attachEvent('onscroll', debounceOrThrottle);
+      root.attachEvent('onload', debounceOrThrottle);
     }
   };
 
@@ -89,9 +96,9 @@
 
   echo.detach = function () {
     if (document.removeEventListener) {
-      root.removeEventListener('scroll', debounce);
+      root.removeEventListener('scroll', debounceOrThrottle);
     } else {
-      root.detachEvent('onscroll', debounce);
+      root.detachEvent('onscroll', debounceOrThrottle);
     }
     clearTimeout(poll);
   };
