Use lodash debounce and throttle instead of maintaining own debounce

Author: benox3

lib/common/Pic.jsx

@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
+import throttle from 'lodash/throttle';
+import debounce from 'lodash/debounce';
+
 import getResponsiveImage from '../utils/getResponsiveImage';
-import debounce from '../utils/debounce';
 import isElementInView from '../utils/isElementInView';
 import ImageWrapper from '../server/index';
 
@@ -62,8 +64,10 @@ export default class Pic extends Component {
     this.setResponsiveImage = this.setResponsiveImage.bind(this);
     this.inViewHandler = this.inViewHandler.bind(this);
 
-    // calls inViewHandler with a debounce
-    this.debouncedInViewHandler = debounce(this.inViewHandler.bind(this), 150);
+    // inViewHandlers
+    this.inViewHandler = this.inViewHandler.bind(this);
+    this.debouncedInViewHandler = debounce(this.inViewHandler.bind(this), 300);
+    this.throttedInViewHandler = throttle(this.inViewHandler.bind(this), 150);
   }
 
   componentDidMount() {

lib/utils/debounce.js

@@ -84,5 +84,8 @@
   "browser": {
     "./lib/server/index.js": "./lib/client/index.js"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.17.4"
+  }
 }

package.json

@@ -3,7 +3,6 @@ import React from 'react';
 import { mount, render } from 'enzyme';
 
 import getResponsiveImage from '../lib/utils/getResponsiveImage';
-import debounce from '../lib/utils/debounce';
 import isElementInView from '../lib/utils/isElementInView';
 import convertReactToHTMLStyle from '../lib/utils/convertReactToHTMLStyle';
 
@@ -38,26 +37,6 @@ describe('Utils', () => {
     });
   });
 
-  describe('debounce', () => {
-    it('debounces correctly', (done) => {
-      let counter = 0;
-
-      const increment = () => {
-        counter += 1;
-      };
-
-      const debouncedIncr = debounce(increment, 15);
-
-      debouncedIncr();
-      debouncedIncr();
-
-      setTimeout(() => {
-        expect(counter).to.equal(1);
-        done();
-      }, 100);
-    });
-  });
-
   describe('isElementInView', () => {
     afterEach(() => {
       window.HTMLDivElement.prototype.getBoundingClientRect = () => ({

test/utils.js

@@ -233,10 +233,6 @@ async@^2.1.2, async@^2.1.4:
   dependencies:
     lodash "^4.14.0"
 
-async@~0.2.6:
-  version "0.2.10"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
-
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -728,7 +724,7 @@ babel-plugin-transform-strict-mode@^6.22.0:
     babel-runtime "^6.22.0"
     babel-types "^6.22.0"
 
-babel-polyfill@^6.16.0, babel-polyfill@^6.23.0:
+babel-polyfill@^6.16.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
   dependencies:
@@ -3115,11 +3111,7 @@ lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-
-lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4639,16 +4631,7 @@ ua-parser-js@^0.7.9:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-uglify-js@^2.6:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.6.4.tgz#65ea2fb3059c9394692f15fed87c2b36c16b9adf"
-  dependencies:
-    async "~0.2.6"
-    source-map "~0.5.1"
-    uglify-to-browserify "~1.0.0"
-    yargs "~3.10.0"
-
-uglify-js@^2.8.5:
+uglify-js@^2.6, uglify-js@^2.8.5:
   version "2.8.22"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.22.tgz#d54934778a8da14903fa29a326fb24c0ab51a1a0"
   dependencies: