(refactor) throttle foldCheck for viewability during scrolling instead of debounce

Author: potench

examples/apps/infinite-scrolling/app.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/sort-comp */
 import React, {Component} from "react";
 import Radium from "radium";
-import debounce from "debounce";
+import debounce from "lodash.debounce";
 import {Bling as Gpt, Events} from "react-gpt"; // eslint-disable-line import/no-unresolved
 import "../log";
 import Content from "./content";

package.json

@@ -32,11 +32,12 @@
     "lib"
   ],
   "dependencies": {
-    "debounce": "^1.0.0",
     "deep-equal": "^1.0.1",
     "eventemitter3": "^2.0.2",
     "fbjs": "^0.8.1",
-    "hoist-non-react-statics": "^1.0.5"
+    "hoist-non-react-statics": "^1.0.5",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1"
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",

src/createManager.js

@@ -1,5 +1,6 @@
 import EventEmitter from "eventemitter3";
-import debounce from "debounce";
+import debounce from "lodash.debounce";
+import throttle from "lodash.throttle";
 import invariant from "fbjs/lib/invariant";
 import {canUseDOM} from "fbjs/lib/ExecutionEnvironment";
 import Events from "./Events";
@@ -131,14 +132,17 @@ export class AdManager extends EventEmitter {
         });
     }
 
-    _foldCheck = debounce(event => {
+    _foldCheck = throttle(event => {
         const instances = this.getMountedInstances();
         instances.forEach(instance => {
             if (instance.getRenderWhenViewable()) {
                 instance.foldCheck(event);
             }
         });
-    }, 66)
+    }, 20, {
+        leading: true,
+        trailing: true
+    })
 
     _handleMediaQueryChange = event => {
         if (this._syncCorrelator) {

test/createManager.spec.js

@@ -399,7 +399,7 @@ describe("createManager", () => {
         adManager.render();
     });
 
-    it("debounces foldCheck", (done) => {
+    it("throttles foldCheck", (done) => {
         const instance = {
             props: {
                 sizeMapping: [{viewport: [0, 0], slot: [320, 50]}]
@@ -427,8 +427,8 @@ describe("createManager", () => {
         adManager.addInstance(instance2);
 
         setTimeout(() => {
-            expect(foldCheck.calledOnce).to.be.true;
-            expect(foldCheck2.calledOnce).to.be.false;
+            expect(foldCheck.calledTwice).to.be.true;
+            expect(foldCheck2.notCalled).to.be.true;
             foldCheck.restore();
             foldCheck2.restore();
             adManager.removeInstance(instance);