From 1f6254109465009ef6cae3f1b948aac01dc0a7f1 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Thu, 11 Jun 2020 06:21:49 -0700
Subject: [PATCH] support throttle modifier in trigger definition

https://github.com/bigskysoftware/htmx/issues/88
---
 src/htmx.js                   | 21 ++++++++++++++++-----
 test/attributes/hx-trigger.js |  1 +
 www/docs.md                   |  5 ++++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/htmx.js b/src/htmx.js
index 3a9309a08..95d649dda 100644
--- 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
index e74e4b35e..b69b449cf 100644
--- 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
index 0e13289cb..c1007ae3b 100644
--- 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"