Throttle improvements (#17)

* New build * Fixed: - Throttling is now only applied if the throttle option supplied was greater than 0 Added: - Key up now flushes any throttled input * Updated CHANGELOG * Bumped minor version (2.4.0 -> 2.5.0)
NoriginMedia · Jul 5, 2019 · 982300e · 982300e
1 parent 3435e15
commit 982300e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.5.0]
+### Fixed
+- Throttling is now only applied if the throttle option supplied was greater than 0
+### Added
+- Key up now flushes any throttled input
+
 ## [2.4.0]
 ### Added
 - added support for `onArrowPress` property, it enables to add a custom behavior when arrows are pressed and can prevent the default navigation.

diff --git a/dist/spatialNavigation.js b/dist/spatialNavigation.js
@@ -343,7 +343,8 @@ var SpatialNavigation = function () {
      */
     this.paused = false;
 
-    this.keyEventListener = null;
+    this.keyDownEventListener = null;
+    this.keyUpEventListener = null;
     this.keyMap = DEFAULT_KEY_MAP;
 
     this.onKeyEvent = this.onKeyEvent.bind(this);
@@ -429,7 +430,7 @@ var SpatialNavigation = function () {
       var _this3 = this;
 
       if (window) {
-        this.keyEventListener = function (event) {
+        this.keyDownEventListener = function (event) {
           if (_this3.paused === true) {
             return;
           }
@@ -456,23 +457,40 @@ var SpatialNavigation = function () {
             var preventDefaultNavigation = _this3.onArrowPress(eventType) === false;
 
             if (preventDefaultNavigation) {
-              _this3.log('keyEventListener', 'default navigation prevented');
+              _this3.log('keyDownEventListener', 'default navigation prevented');
               _this3.visualDebugger && _this3.visualDebugger.clear();
             } else {
               _this3.onKeyEvent(event.keyCode);
             }
           }
         };
 
-        window.addEventListener('keydown', (0, _throttle2.default)(this.keyEventListener, this.throttle));
+        // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame
+        if (this.throttle) {
+          this.keyDownEventListener = (0, _throttle2.default)(this.keyDownEventListener.bind(this), this.throttle);
+
+          // When throttling then make sure to only throttle key down and flush in the case of key up
+          this.keyUpEventListener = function () {
+            return _this3.keyDownEventListener.flush();
+          };
+
+          window.addEventListener('keyup', this.keyUpEventListener);
+        }
+
+        window.addEventListener('keydown', this.keyDownEventListener);
       }
     }
   }, {
     key: 'unbindEventHandlers',
     value: function unbindEventHandlers() {
       if (window) {
-        window.removeEventListener('keydown', this.keyEventListener);
-        this.keyEventListener = null;
+        window.removeEventListener('keydown', this.keyDownEventListener);
+        this.keyDownEventListener = null;
+
+        if (this.throttle) {
+          window.removeEventListener('keyup', this.keyUpEventListener);
+          this.keyUpEventListener = null;
+        }
       }
     }
   }, {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@noriginmedia/react-spatial-navigation",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "HOC-based Spatial Navigation (key navigation) solution for React",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/spatialNavigation.js b/src/spatialNavigation.js
@@ -287,7 +287,8 @@ class SpatialNavigation {
      */
     this.paused = false;
 
-    this.keyEventListener = null;
+    this.keyDownEventListener = null;
+    this.keyUpEventListener = null;
     this.keyMap = DEFAULT_KEY_MAP;
 
     this.onKeyEvent = this.onKeyEvent.bind(this);
@@ -363,7 +364,7 @@ class SpatialNavigation {
 
   bindEventHandlers() {
     if (window) {
-      this.keyEventListener = (event) => {
+      this.keyDownEventListener = (event) => {
         if (this.paused === true) {
           return;
         }
@@ -388,22 +389,37 @@ class SpatialNavigation {
           const preventDefaultNavigation = this.onArrowPress(eventType) === false;
 
           if (preventDefaultNavigation) {
-            this.log('keyEventListener', 'default navigation prevented');
+            this.log('keyDownEventListener', 'default navigation prevented');
             this.visualDebugger && this.visualDebugger.clear();
           } else {
             this.onKeyEvent(event.keyCode);
           }
         }
       };
 
-      window.addEventListener('keydown', lodashThrottle(this.keyEventListener, this.throttle));
+      // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame
+      if (this.throttle) {
+        this.keyDownEventListener = lodashThrottle(this.keyDownEventListener.bind(this), this.throttle);
+
+        // When throttling then make sure to only throttle key down and flush in the case of key up
+        this.keyUpEventListener = () => this.keyDownEventListener.flush();
+
+        window.addEventListener('keyup', this.keyUpEventListener);
+      }
+
+      window.addEventListener('keydown', this.keyDownEventListener);
     }
   }
 
   unbindEventHandlers() {
     if (window) {
-      window.removeEventListener('keydown', this.keyEventListener);
-      this.keyEventListener = null;
+      window.removeEventListener('keydown', this.keyDownEventListener);
+      this.keyDownEventListener = null;
+
+      if (this.throttle) {
+        window.removeEventListener('keyup', this.keyUpEventListener);
+        this.keyUpEventListener = null;
+      }
     }
   }