Add throttle/debounce

Author: Aljullu

package.json

@@ -53,5 +53,9 @@
   "bugs": {
     "url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
   },
-  "homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme"
+  "homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme",
+  "dependencies": {
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1"
+  }
 }

src/components/LazyLoadImage.jsx

@@ -8,20 +8,22 @@ class LazyLoadImage extends React.Component {
   }
 
   render() {
-    const { afterLoad, beforeLoad, placeholder, scrollPosition, threshold,
-      visibleByDefault, ...imgProps } = this.props;
+    const { afterLoad, beforeLoad, delayMethod, delayTime, placeholder,
+      scrollPosition, threshold, visibleByDefault, ...imgProps } = this.props;
 
     return (
       <LazyLoadComponent
         afterLoad={afterLoad}
         beforeLoad={beforeLoad}
         className={this.props.className}
+        delayMethod={delayMethod}
+        delayTime={delayTime}
         height={this.props.height}
         placeholder={placeholder}
         scrollPosition={scrollPosition}
+        style={this.props.style}
         threshold={threshold}
         visibleByDefault={visibleByDefault}
-        style={this.props.style}
         width={this.props.width}>
         <img {...imgProps} />
       </LazyLoadComponent>

src/components/LazyLoadImage.spec.js

@@ -18,6 +18,8 @@ describe('LazyLoadImage', function() {
     const props = {
       afterLoad: () => null,
       beforeLoad: () => null,
+      delayMethod: 'debounce',
+      delayTime: 600,
       placeholder: null,
       scrollPosition: {x: 0, y: 0},
       style: {},
@@ -28,6 +30,8 @@ describe('LazyLoadImage', function() {
       <LazyLoadImage
         afterLoad={props.afterLoad}
         beforeLoad={props.beforeLoad}
+        delayMethod={props.delayMethod}
+        delayTime={props.delayTime}
         placeholder={props.placeholder}
         scrollPosition={props.scrollPosition}
         src={props.src}
@@ -40,6 +44,8 @@ describe('LazyLoadImage', function() {
 
     expect(lazyLoadComponent.props.afterLoad).toEqual(props.afterLoad);
     expect(lazyLoadComponent.props.beforeLoad).toEqual(props.beforeLoad);
+    expect(lazyLoadComponent.props.delayMethod).toEqual(props.delayMethod);
+    expect(lazyLoadComponent.props.delayTime).toEqual(props.delayTime);
     expect(lazyLoadComponent.props.placeholder).toEqual(props.placeholder);
     expect(lazyLoadComponent.props.scrollPosition).toEqual(props.scrollPosition);
     expect(lazyLoadComponent.props.style).toEqual(props.style);

src/hoc/trackWindowScroll.js

@@ -1,10 +1,21 @@
 import React from 'react';
+import { PropTypes } from 'prop-types';
+import debounce from 'lodash.debounce';
+import throttle from 'lodash.throttle';
 
 const trackWindowScroll = (BaseComponent) => {
   class ScrollAwareComponent extends React.Component {
     constructor(props) {
       super(props);
 
+      const onChangeScroll = this.onChangeScroll.bind(this);
+
+      if (props.delayMethod === 'debounce') {
+        this.delayedScroll = debounce(onChangeScroll, props.delayTime);
+      } else if (props.delayMethod === 'throttle') {
+        this.delayedScroll = throttle(onChangeScroll, props.delayTime);
+      }
+
       this.state = {
         scrollPosition: {
           x: window.scrollX || window.pageXOffset,
@@ -14,13 +25,13 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     componentDidMount() {
-      window.addEventListener('scroll', this.onChangeScroll.bind(this));
-      window.addEventListener('resize', this.onChangeScroll.bind(this));
+      window.addEventListener('scroll', this.delayedScroll);
+      window.addEventListener('resize', this.delayedScroll);
     }
 
     componentWillUnmount() {
-      window.removeEventListener('scroll', this.onChangeScroll.bind(this));
-      window.removeEventListener('resize', this.onChangeScroll.bind(this));
+      window.removeEventListener('scroll', this.delayedScroll);
+      window.removeEventListener('resize', this.delayedScroll);
     }
 
     onChangeScroll() {
@@ -33,14 +44,26 @@ const trackWindowScroll = (BaseComponent) => {
     }
 
     render() {
+      const { delayMethod, delayTime, ...props } = this.props;
+
       return (
         <BaseComponent
           scrollPosition={this.state.scrollPosition}
-          {...this.props} />
+          {...props} />
       );
     }
   }
 
+  ScrollAwareComponent.propTypes = {
+    delayMethod: PropTypes.oneOf(['debounce', 'throttle']),
+    delayTime: PropTypes.number
+  };
+
+  ScrollAwareComponent.defaultProps = {
+    delayMethod: 'throttle',
+    delayTime: 300
+  };
+
   return ScrollAwareComponent;
 };