htmx
htmx copied to clipboard
`throttle` trigger modifier behaviour doesn't match the reference
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);
}
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.
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/
Closing issue because the documentation has been updated to reflect this behavior.