Combination of throttle and debounce in Alpine HTML directives?

[mikesnoeren]

When checking window.scrollY > 100 for example, you could run into the problem where you don't catch the event when using .throttle. Therefore it would be great if Alpine allowed combining .throttle and .debounce modifiers directly in HTML.

Either by supporting them together like:
@scroll.window.throttle.100.debounce.200="handleScroll"

Or by introducing a new combined modifier like:
@scroll.window.throttleDebounce.100.200="handleScroll"

Right now, I’m working around this by manually wiring it up in JS:

// combine throttle and debounce
this._throttled = Alpine.throttle(() => this.callback(), 100);
this._debounced = Alpine.debounce(() => this.callback(), 100);

window.addEventListener('scroll', () => {
    this._throttled();
    this._debounced();
});

[ekwoka]

Chances are you actually should just not throttle it. that it isn't costly enough to create an issue if this is something that you're okay doing.

[mikesnoeren]

Hmm thanks for that insight, I never considered that.