Debounce

[jridgewell]

A performant debounce.

[aghassemi]

curious why 0 instead of null?

[jridgewell]

setTimeout returns a positive int, so I use 0 to mean no timeout scheduled. Just keeps the type the same in the JS engine.

[aghassemi]

mmm, I believe it is a more desirable behavior if the very first call is a pass-thru and does not wait (or at least configurable)

let's also document the behavior of the first call regardless

[jridgewell]

Based on the PositionObserver code, that'd be incorrect. We can add a flag once it's needed later.

It is documented. 😛

[aghassemi]

documentation wasn't clear to me (since the last call didn't register to me to imply of course also the first call since there is no last call :) ) I think first call is special enough to deserve its own sentence.

PositionObserver definitely should act on the first onScroll event it receives immediately.

[zhouyx]

I agree current PositionObserver usage doesn't need (do not want) the very first call to be handled differently. Let's make it configurable if requested later.

[aghassemi]

ignore me, confused debounce with throttle (again) 😳
Is there a better common name/API for debounce out there? like timeoutAfterLastCall(listener, cb, timeout) or var fn = timeoutAfterLastCall(cb, timeout) ?

[aghassemi]

I am worried that this API only works nicely when used directly as a listener but becomes fragile in other cases.
If we take the PositionObserver use-case, I assume it would becomes something like:

addEventListener('scroll', onScroll);

const debouncedScroll = debounce(onEnd, 500);
function onScroll() {
  isScrolling = true;
  debouncedScroll();
}

function onEnd() {
  isScrolling = false;
}

This looks a bit hard to read (what is even a clean name for variable that holds the return of debounce?) also a bit fragile (e.g. replacing debouncedScroll(); with debounce(onEnd, 500); will break the code).

Why not something like:

addEventListener('scroll', onScroll);

listenerTimeout(onScroll, 500).then(onEnd);

function onScroll() {
  isScrolling = true;
}

function onEnd() {
  isScrolling = false;
}

does this make sense or am I off base here? ( I do understand current API is common in JS libraries and works nicely for cases like addEventListener('scroll', debounce(onEnd, 500));)

Edit:
I guess for something like listenerTimeout(onScroll, 500).then(onEnd); to work, it needs to be able to spy on function calls to onScroll. This is going down a rabbit hole. Maybe correct answer is to fix the first "it is fragile" problem by using two listeners:

addEventListener('scroll', onScroll);
addEventListener('scroll', debounce(onEnd, 500));

anyway, would still love to hear your opinion though @jridgewell

[jridgewell]

Soo mannyyy commentttts.

Is there a better common name/API for debounce out there?

debounce is the standard name, since Underscore released it some 6 years ago.

what is even a clean name for variable that holds the return of debounce?

callback => debouncedCallback, same as we use callback => boundCallback

also a bit fragile (e.g. replacing debouncedScroll(); with debounce(onEnd, 500); will break the code).

That's like replacing boundMethod() with method.bind(this). One creates a wrapped function, the other executes it.

Something like listenerTimeout(onScroll, 500).then(onEnd);

You're looking for an Observable, specifically a debounced one.

Maybe correct answer is to fix the first "it is fragile" problem by using two listeners:

That's basically what I was suggesting in the PositionObserver PR.

[lannka]

My understanding of debounce is very different:
https://css-tricks.com/the-difference-between-throttling-and-debouncing/

[zhouyx]

Please make sure all usage of rateLimit are renamed.

nvm I found it

[lannka]

utils/function.js sounds like a too broad name, and eventually become a garbage bin for everything.

[jridgewell]

Propose something better?

[lannka]

rate-limit.js? :-)

[jridgewell]

Then why's debounce in there? And they're so similar they should be in the same file.

[lannka]

rate-limit.js

• function throttle()
• function debounce()

[jridgewell]

Done

😛

[jridgewell]

Welp, it didn't let me put the link in the dismissal. #9252 (comment)

[lannka]

@jridgewell you missed my last comment:

My understanding of debounce is very different:
https://css-tricks.com/the-difference-between-throttling-and-debouncing/

[jridgewell]

Where was that? Either way, the debounce described in that article and the one I've written are the same. It uses Underscore's _.debounce (which I helped maintain) which I rewrote here.

[lannka]

const remaining = minInterval - (Date.now() - timestamp);

My understand of debounce function will only fire when it has been idle (no calls) for the minInterval time. So why do we need to calculate remaining ?

[jridgewell]

That's an optimization so we don't have to reset and queue a new timer every time (micro-slow). So:

• timer is scheduled at t=20 and minInterval=100
• second call comes in at t=50, but doesn't reset timer
• we execute the timeout callback at t=120, but we have to wait 100 - (120 - 50) = 30ms
  • schedule a timer for 120 + 30 = 150
• execute timeout at t=150

[lannka]

Got you. Sounds good.