1.1.1

mitera · Dec 13, 2023 · 9bbad6c · 9bbad6c
1 parent 462b3c8
commit 9bbad6c
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+<a name="1.1.1"></a>
+# 1.1.1 (2023-12-13)
+
+### release summary
+
+- Added _throttle method
+- Update document
+
 <a name="1.1.0"></a>
 # 1.1.0 (2023-12-12)
 

diff --git a/README.md b/README.md
@@ -88,7 +88,8 @@ The default `options` are:
         target: null,
         remove: null,
         attributeName: null,
-        events: true
+        events: true,
+        throttle: 80
     }
 
 Where:
@@ -99,7 +100,8 @@ Where:
 - `target` is an optional element to use instead of the element with maximum height
 - `remove` is an optional element/s to excluded
 - `attributeName` is an optional for use custom attribute
-- `events` is an optional for enable default events
+- `events` is an optional for enable default events, default is `true`
+- `throttle` milliseconds to executed resize event, default is `80`
 
 ### Data API
 
@@ -161,6 +163,12 @@ This will set the `min-height` property instead of the `height` property.
 
 Where `event` a event object (`DOMContentLoaded`, `resize`, `orientationchange`).
 
+#### Throttling resize updates
+
+By default, the `events` is throttled to execute at a maximum rate of once every `80ms`.
+Decreasing the `throttle` option will update your layout quicker, appearing smoother during resize, at the expense of performance.
+If you experience lagging or freezing during resize, you should increase the `throttle` option.
+
 #### Manually apply match height
 
 Manual apply, code for JavaScript framework/library (e.g. `vue`, `react` ...).

diff --git a/dist/vanilla-match-height.js b/dist/vanilla-match-height.js
@@ -1,5 +1,5 @@
 /**
- * vanilla-match-height v1.1.0 by @mitera
+ * vanilla-match-height v1.1.1 by @mitera
  * Simone Miterangelis <simone@mite.it>
  * License: MIT
  */
@@ -47,7 +47,8 @@
             attributeValue: null,
             property: 'height',
             remove: null,
-            events: true
+            events: true,
+            throttle: 80
         }
 
         if (settings != null) {
@@ -64,6 +65,7 @@
             var $this = this;
             this.bind = function(){ $this._applyAll($this); };
             window.addEventListener("DOMContentLoaded", this.bind, { once: true });
+            if (this.settings.throttle > 0) this.bind = this._throttle(this.bind, this.settings.throttle);
             this._init();
         }
     }
@@ -88,6 +90,30 @@
         window.removeEventListener("orientationchange", this.bind);
     }
 
+    /**
+     * _throttle
+     * Throttle updates
+     * @param {function} fn
+     * @param {int} threshold
+     */
+    MatchHeight.prototype._throttle = function(fn, threshold) {
+        let last, deferTimer;
+        return function () {
+            const now = Date.now();
+            if (last && now < last + threshold) {
+                clearTimeout(deferTimer);
+                deferTimer = setTimeout(function () {
+                    last = now;
+                    fn();
+                }, threshold);
+            }
+            else {
+                last = now;
+                fn();
+            }
+        };
+    }
+
     /**
      * _applyAll
      * Initialize the common events

diff --git a/dist/vanilla-match-height.min.js b/dist/vanilla-match-height.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-match-height",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "license": "MIT",
   "author": "Simone Miterangelis <simone@mite.it>",
   "description": "a vanilla responsive equal heights",

diff --git a/vanilla-match-height.js b/vanilla-match-height.js
@@ -1,5 +1,5 @@
 /**
- * vanilla-match-height v1.1.0 by @mitera
+ * vanilla-match-height v1.1.1 by @mitera
  * Simone Miterangelis <simone@mite.it>
  * License: MIT
  */
@@ -47,7 +47,8 @@
             attributeValue: null,
             property: 'height',
             remove: null,
-            events: true
+            events: true,
+            throttle: 80
         }
 
         if (settings != null) {
@@ -64,6 +65,7 @@
             var $this = this;
             this.bind = function(){ $this._applyAll($this); };
             window.addEventListener("DOMContentLoaded", this.bind, { once: true });
+            if (this.settings.throttle > 0) this.bind = this._throttle(this.bind, this.settings.throttle);
             this._init();
         }
     }
@@ -88,6 +90,30 @@
         window.removeEventListener("orientationchange", this.bind);
     }
 
+    /**
+     * _throttle
+     * Throttle updates
+     * @param {function} fn
+     * @param {int} threshold
+     */
+    MatchHeight.prototype._throttle = function(fn, threshold) {
+        let last, deferTimer;
+        return function () {
+            const now = Date.now();
+            if (last && now < last + threshold) {
+                clearTimeout(deferTimer);
+                deferTimer = setTimeout(function () {
+                    last = now;
+                    fn();
+                }, threshold);
+            }
+            else {
+                last = now;
+                fn();
+            }
+        };
+    }
+
     /**
      * _applyAll
      * Initialize the common events