support throttle modifier in trigger definition

#88
bigskysoftware · Jun 11, 2020 · 1f62541 · ssendev · Jun 11, 2020 · 1f62541
1 parent 4ef719e
commit 1f62541
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -571,6 +571,9 @@ return (function () {
                         if (token.indexOf("delay:") === 0) {
                             triggerSpec.delay = parseInterval(token.substr(6));
                         }
+                        if (token.indexOf("throttle:") === 0) {
+                            triggerSpec.delay = parseInterval(token.substr(9));
+                        }
                     }
                     return triggerSpec;
                 }).filter(function(x){ return x !== null });
@@ -663,13 +666,21 @@ return (function () {
                     if (elementData.delayed) {
                         clearTimeout(elementData.delayed);
                     }
-                    var issueRequest = function(){
-                        issueAjaxRequest(elt, verb, path, evt.target);
+                    if (elementData.throttle) {
+                        return;
                     }
-                    if (triggerSpec.delay) {
-                        elementData.delayed = setTimeout(issueRequest, triggerSpec.delay);
+
+                    if (triggerSpec.throttle) {
+                        elementData.throttle = setTimeout(function(){
+                            issueAjaxRequest(elt, verb, path, evt.target);
+                            elementData.throttle = null;
+                        }, triggerSpec.throttle);
+                    } else if (triggerSpec.delay) {
+                        elementData.delayed = setTimeout(function(){
+                            issueAjaxRequest(elt, verb, path, evt.target);
+                        }, triggerSpec.delay);
                     } else {
-                        issueRequest();
+                        issueAjaxRequest(elt, verb, path, evt.target);
                     }
                 }
             };

diff --git a/test/attributes/hx-trigger.js b/test/attributes/hx-trigger.js
@@ -121,6 +121,7 @@ describe("hx-trigger attribute", function(){
         "event changed": [{trigger: 'event', changed: true}],
         "event once": [{trigger: 'event', once: true}],
         "event delay:1s": [{trigger: 'event', delay: 1000}],
+        "event throttle:1s": [{trigger: 'event', throttle: 1000}],
         "event changed once delay:1s": [{trigger: 'event', changed: true, once: true, delay: 1000}],
         "event1,event2": [{trigger: 'event1'}, {trigger: 'event2'}],
         "event1, event2": [{trigger: 'event1'}, {trigger: 'event2'}],

diff --git a/www/docs.md b/www/docs.md
@@ -157,8 +157,11 @@ There are few other modifiers you can use for trigger:
 * `changed` - only issue a request if the value of the element has changed
 *  `delay:<time interval>` - wait the given amount of time (e.g. `1s`) before
 issuing the request.  If the event triggers again, the countdown is reset.
+*  `throttle:<time interval>` - wait the given amount of time (e.g. `1s`) before
+issuing the request.  Unlike `delay` if a new event occurs before the time limit is hit the event will be discarded,
+so the request will trigger at the end of the time period.
 
-You can use these two attributes to implement a common UX pattern, [Active Search](/examples/active-search):
+You can use these attributes to implement many common UX patterns, such as [Active Search](/examples/active-search):
 
 ```html
    <input type="text" name="q"