frame-throttle - npm Package Compare versions

Comparing version 2.0.1 to 3.0.0

CHANGELOG.md

@@ -6,2 +6,35 @@ # Change Log
 
+## [3.0.0] - 2017-08-28
+### Added
+- Throttled listeners can now be canceled (useful for cleanup):
+  ```js
+  var throttledListener = throttle(listener);
+  window.addEventListener('resize', throttledListener);
+  submitButton.addEventListener('click', () => {
+    window.removeEventListener('resize', throttledListener);
+    // prevent any queued calls from executing on the next animation frame:
+    throttledListener.cancel();
+  })
+  ```
+
+### Changed
+- Updated types to use generics; `throttle` will now return a function
+  of the same type it was passed.
+- frame-throttle now runs in strict mode
+
+### Fixed
+- Binding a throttled listener with `.bind()` resulted in both the bound and
+  unbound listeners being throttled together.
+
+  For instance, in the following scenario, `listener` was only being called once:
+  ```js
+  var throttledListener = throttle(listener);
+  var boundThrottledListener1 = throttledListener.bind(someContext);
+  var boundThrottledListener2 = throttledListener.bind(anotherContext);
+
+  throttledListener();
+  boundThrottledListener1();
+  boundThrottledListener2();
+  ```
+
 ## [2.0.1] - 2016-09-26
@@ -14,2 +47,3 @@ ### Fixed
 - `frame-throttle.d.ts` - a [TypeScript declaration file] for `frame-throttle.js`
+
 ### Changed
@@ -21,3 +55,3 @@ - Converted project to [TypeScript]
   This means that you must now use:
-  ```
+  ```js
   // Correct
@@ -27,3 +61,3 @@ var throttle = require('frame-throttle').throttle;
   rather than
-  ```
+  ```js
   // Wrong!
@@ -36,2 +70,3 @@ var throttle = require('frame-throttle');
   This only happens when `requestAnimationFrame` is present.
+
 ### Known Issues
@@ -60,4 +95,5 @@ - `package.json` was misconfigured and didn't include the correct files
 
+[1.1.0]: https://github.com/pelotoncycle/frame-throttle/compare/v1.0.0...v1.1.0
+[2.0.0]: https://github.com/pelotoncycle/frame-throttle/compare/v1.1.0...v2.0.0
 [2.0.1]: https://github.com/pelotoncycle/frame-throttle/compare/v1.1.0...v2.0.1
-[2.0.0]: https://github.com/pelotoncycle/frame-throttle/compare/v1.1.0...v2.0.0
-[1.1.0]: https://github.com/pelotoncycle/frame-throttle/compare/v1.0.0...v1.1.0
+[3.0.0]: https://github.com/pelotoncycle/frame-throttle/compare/v2.0.1...v3.0.0

dist/frame-throttle.d.ts

@@ -1,2 +0,14 @@
-export declare type CallbackFunction = (...args: any[]) => void;
-export declare const throttle: (callback: CallbackFunction) => CallbackFunction;
+export declare type Cancellable<T extends Function> = T & {
+    /**
+     * Cancel the next scheduled invocation of the callback.
+     */
+    cancel(): void;
+};
+/**
+ * Returns a throttled function which runs once per rendered frame using
+ * requestAnimationFrame. If window.requestAnimationFrame does not exist,
+ * the behavior will be approximated using setTimeout.
+ *
+ * @param callback the function to be throttled
+ */
+export declare const throttle: <T extends Function>(callback: T) => Cancellable<T>;

dist/frame-throttle.js

@@ -1,26 +0,67 @@
-exports.throttle = function (callback) {
-    var running = false;
-    function resetRunning() {
-        running = false;
-    }
-    var callbackThis;
-    var args;
-    return function () {
-        callbackThis = this;
-        args = arguments;
-        if (running) {
+"use strict";
+exports.__esModule = true;
+var wrapperFactory = function (wrapperContext) {
+    var resetCancelToken = function () {
+        wrapperContext.cancelToken = false;
+    };
+    var wrapper = function (cbThis, cb) {
+        var args = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args[_i - 2] = arguments[_i];
+        }
+        wrapperContext.callbackThis = cbThis;
+        wrapperContext.args = args;
+        if (wrapperContext.cancelToken) {
             return;
         }
-        running = true;
         if ('requestAnimationFrame' in window) {
-            window.requestAnimationFrame(function () {
-                callback.apply(callbackThis, args);
-                resetRunning();
+            wrapperContext.cancelToken = window.requestAnimationFrame(function () {
+                cb.apply(wrapperContext.callbackThis, wrapperContext.args);
+                resetCancelToken();
             });
         }
         else {
-            callback.apply(callbackThis, args);
-            window.setTimeout(resetRunning, 1000 / 60); // 60 fps
+            cb.apply(wrapperContext.callbackThis, wrapperContext.args);
+            wrapperContext.cancelToken = window.setTimeout(resetCancelToken, 1000 / 60); // 60 fps
         }
     };
+    wrapper.cancel = function () {
+        if ('requestAnimationFrame' in window) {
+            window.cancelAnimationFrame(wrapperContext.cancelToken);
+        }
+        window.clearTimeout(wrapperContext.cancelToken);
+        resetCancelToken();
+    };
+    return wrapper;
 };
+var throttleFactory = function (callback, thisArg) {
+    var argArray = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        argArray[_i - 2] = arguments[_i];
+    }
+    var wrapper = wrapperFactory({});
+    var argCount = arguments.length;
+    var throttledCallback = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        wrapper.apply(void 0, [argCount > 1 ? thisArg : this, callback].concat(argArray, args));
+    };
+    throttledCallback.cancel = function () { return wrapper.cancel(); };
+    return throttledCallback;
+};
+/**
+ * Returns a throttled function which runs once per rendered frame using
+ * requestAnimationFrame. If window.requestAnimationFrame does not exist,
+ * the behavior will be approximated using setTimeout.
+ *
+ * @param callback the function to be throttled
+ */
+exports.throttle = function (callback) {
+    var throttledCallback = throttleFactory(callback);
+    // Override `bind()` to create a new throttled callback, otherwise both
+    // the unbound and bound callbacks will have the same scope.
+    throttledCallback.bind = throttleFactory.bind(null, callback);
+    return throttledCallback;
+};

package.json

 {
   "name": "frame-throttle",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "A lightweight way to throttle events and callbacks using requestAnimationFrame",
@@ -14,10 +14,10 @@ "main": "dist/frame-throttle.js",
     "clean": "del-cli dist",
+    "compile": "npm run clean && tsc",
+    "coveralls": "npm run test-cov -- --report lcovonly && cat coverage/lcov.info | coveralls",
     "lint": "npm run lint-noforce -- --force",
     "lint-noforce": "tslint --project tsconfig.json",
-    "compile": "npm run clean && tsc",
     "pretest": "npm run lint-noforce && npm run compile",
     "prepublish": "npm test",
     "test": "tape dist/tests/*.tests.js",
-    "test-cov": "npm run pretest && istanbul cover tape -- dist/tests/*.tests.js",
-    "coveralls": "npm run test-cov -- --report lcovonly && cat coverage/lcov.info | coveralls"
+    "test-cov": "npm run pretest && istanbul cover tape -- dist/tests/*.tests.js"
   },
@@ -45,2 +45,4 @@ "keywords": [
   "devDependencies": {
+    "@types/jsdom": "11.0.1",
+    "@types/mock-raf": "1.0.2",
     "@types/sinon": "^1.16.31",
@@ -50,4 +52,4 @@ "coveralls": "^2.11.12",
     "istanbul": "0.4.5",
-    "jsdom": "^9.4.1",
-    "mock-raf": "0.0.2",
+    "jsdom": "11.1.0",
+    "mock-raf": "1.0.0",
     "sinon": "^1.17.5",
@@ -57,4 +59,4 @@ "tape": "^4.6.0",
     "tslint": "^3.15.1",
-    "typescript": "^2.0.3"
+    "typescript": "2.4.2"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17150

increased by234.11%

Number of package files

7

increased by40%

Lines of code

81

increased by189.29%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

133

increased byInfinity%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

13

increased by18.18%

No dependency changes