How to debounce captured scrollwheel events?

Community Help
1

I am currently using d3 to do capture wheel or scrollwheel events on a container, e.g.:

  d3.select(myContainer).on("wheel", (evt) => {
    console.log(
      `wheel > evt.layerX ${evt.layerX} evt.layerY ${evt.layerY} evt.deltaY ${evt.deltaY}`
    );
    evt.preventDefault();
  });

So far so good. Scrollwheel actions return event details to the console. The entire notebook stays put when I use the scrollwheel.

However, I would like to debounce scrolling actions, so that multiple scroll events in one direction only trigger one call to a function, which will change values in the notebook (depending on values of evt.layerX etc.).

How do I debounce function calls generally? There is a notebook on debounced inputs at: Debouncing Input / Mike Bostock / Observable – but I am not using an input for this.

Thanks,
Alex

2

I had this unfinished notebook lingering in my drafts since 2019; maybe it can be useful? Hello debounce / Fil / Observable

3

Thank you, that appears to work perfectly!