Rework multiple spec and multiple targets for delayed modifier

src/htmx.js

@@ -700,9 +700,10 @@ var htmx = (function() {
    * @property {ListenerInfo[]} [listenerInfos]
    * @property {boolean} [cancelled]
    * @property {boolean} [triggeredOnce]
-   * @property {number} [delayed]
+   * @property {WeakMap<HtmxTriggerSpecification,number>} [delayed]
    * @property {number|null} [throttle]
    * @property {WeakMap<HtmxTriggerSpecification,WeakMap<EventTarget,string>>} [lastValue]
+   * @property {WeakMap<HtmxTriggerSpecification,Map<EventTarget,string>>} [pendingValue]
    * @property {boolean} [loaded]
    * @property {string} [path]
    * @property {string} [verb]
@@ -2503,6 +2504,14 @@ var htmx = (function() {
     } else {
       eltsToListenOn = [elt]
     }
+    if (triggerSpec.delay > 0) {
+      if (!('delayed' in elementData)) {
+        elementData.delayed = new WeakMap()
+      }
+      if (!('pendingValue' in elementData)) {
+        elementData.pendingValue = new WeakMap()
+      }
+    }
     // store the initial values of the elements, so we can tell if they change
     if (triggerSpec.changed) {
       if (!('lastValue' in elementData)) {
@@ -2559,13 +2568,22 @@ var htmx = (function() {
             // @ts-ignore value will be undefined for non-input elements, which is fine
             const value = node.value
             const lastValue = elementData.lastValue.get(triggerSpec)
-            if (lastValue.has(node) && lastValue.get(node) === value) {
-              return
+            if (triggerSpec.delay > 0) {
+              if (!elementData.pendingValue.has(triggerSpec)) {
+                elementData.pendingValue.set(triggerSpec, new Map())
+              }
+              const pendingValue = elementData.pendingValue.get(triggerSpec)
+              pendingValue.set(node, value)
+            } else {
+              if (lastValue.has(node) && lastValue.get(node) === value) {
+                return
+              }
+              lastValue.set(node, value)
             }
-            lastValue.set(node, value)
           }
-          if (elementData.delayed) {
-            clearTimeout(elementData.delayed)
+          if (elementData.delayed && elementData.delayed.has(triggerSpec)) {
+            clearTimeout(elementData.delayed.get(triggerSpec))
+            elementData.delayed.delete(triggerSpec)
           }
           if (elementData.throttle) {
             return
@@ -2580,10 +2598,27 @@ var htmx = (function() {
               }, triggerSpec.throttle)
             }
           } else if (triggerSpec.delay > 0) {
-            elementData.delayed = getWindow().setTimeout(function() {
+            elementData.delayed.set(triggerSpec, getWindow().setTimeout(function() {
+              elementData.delayed.delete(triggerSpec)
+              if (triggerSpec.changed) {
+                const lastValue = elementData.lastValue.get(triggerSpec) || new WeakMap()
+                const pendingValue = elementData.pendingValue.get(triggerSpec) || new Map()
+                elementData.pendingValue.set(triggerSpec, new Map())
+
+                let changed = false
+                pendingValue.forEach((new_value, new_node) => {
+                  if (lastValue.get(new_node) !== new_value) {
+                    changed = true
+                    lastValue.set(new_node, new_value)
+                  }
+                })
+                if (!changed) {
+                  return
+                }
+              }
               triggerEvent(elt, 'htmx:trigger')
               handler(elt, evt)
-            }, triggerSpec.delay)
+            }, triggerSpec.delay))
           } else {
             triggerEvent(elt, 'htmx:trigger')
             handler(elt, evt)

test/attributes/hx-trigger.js

@@ -871,6 +871,60 @@ describe('hx-trigger attribute', function() {
     }, 50)
   })
 
+  it('two delays on the same node are independent', function(done) {
+    var requests = 0
+    var server = this.server
+    this.server.respondWith('GET', '/test', function(xhr) {
+      requests++
+      xhr.respond(200, {}, 'Requests: ' + requests)
+    })
+    this.server.respondWith('GET', '/bar', 'bar')
+    var button = make('<button></button>')
+    var div = make("<div hx-trigger='click delay:10ms,click delay:50ms from:button' hx-get='/test'></div>")
+
+    div.click()
+    button.click()
+    this.server.respond()
+    div.innerText.should.equal('')
+
+    setTimeout(function() {
+      server.respond()
+      div.innerText.should.equal('Requests: 1')
+
+      setTimeout(function() {
+        server.respond()
+        div.innerText.should.equal('Requests: 2')
+
+        done()
+      }, 50)
+    }, 20)
+  })
+
+  it('delay for multiple nodes are shared', function(done) {
+    var requests = 0
+    var server = this.server
+    this.server.respondWith('GET', '/test', function(xhr) {
+      requests++
+      xhr.respond(200, {}, 'Requests: ' + requests)
+    })
+    this.server.respondWith('GET', '/bar', 'bar')
+    var button1 = make('<button></button>')
+    var button2 = make('<button></button>')
+    var div = make("<div hx-trigger='click delay:10ms from:button' hx-get='/test'></div>")
+
+    button1.click()
+    button2.click()
+    this.server.respond()
+    div.innerText.should.equal('')
+
+    setTimeout(function() {
+      server.respond()
+      div.innerText.should.equal('Requests: 1')
+
+      done()
+    }, 20)
+  })
+
   it('A 0 delay does not delay the request', function(done) {
     var requests = 0
     this.server.respondWith('GET', '/test', function(xhr) {

www/content/docs.md

@@ -245,6 +245,8 @@ Other modifiers you can use for triggers are:
 * `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.
+If multiple nodes are targetted by one trigger specification, they share a delay.
+If a node has multiple triggers with the delay modifier, they act independently.
 *  `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.