htmx icon indicating copy to clipboard operation
htmx copied to clipboard

`throttle` trigger modifier behaviour doesn't match the reference

Open bradleyjkemp opened this issue 3 years ago • 2 comments

https://htmx.org/attributes/hx-trigger/ says:

throttle: - a throttle will occur before an event triggers a request. If the event is seen again before the delay completes it is ignored, the element will trigger at the end of the delay.

However the relevant code (introduced by #458) is: https://github.com/bigskysoftware/htmx/blob/deed20fd60528f23d299be8002d539ebf372d0a5/src/htmx.js#L1095-L1100 Which implements the opposite: the event triggers a request immediately and all events are ignored until the delay completes

I think #458 was a step in the right direction (i.e. the event should fire immediately) but I think it needs extending so that subsequent events during the timeout do still trigger a request at the end of the timeout.

My use case for this is implementing the active search but where results are loaded while the user is typing as well as a final request once the user has finished typing.

Would simply also calling issueAjaxRequest within the timeout work? i.e.

if(!elementData.throttle) {
    issueAjaxRequest(verb, path, elt, evt);
    elementData.throttle = setTimeout(function(){
        issueAjaxRequest(verb, path, elt, evt);
        elementData.throttle = null;
    }, triggerSpec.throttle);
}

bradleyjkemp avatar Dec 29 '21 19:12 bradleyjkemp

Sorry, the docs were wrong here and throttle is behaving as designed: the first event fires and then all events are ignored until the throttle expires.

Your use case where there is a final request is an interesting situation though. You want it to occur when the throttle expires. Need to think about this.

1cg avatar May 13 '22 15:05 1cg

Right now I use hx-sync replace so that only the last event is used and all previous requests are cancelled. Similar to the last example on this page https://htmx.org/attributes/hx-sync/

jreviews avatar May 13 '22 20:05 jreviews

Closing issue because the documentation has been updated to reflect this behavior.

alexpetros avatar Jul 20 '23 18:07 alexpetros