#247·tether

tick function inefficient

Author: NicBrightCreated Mar 7, 2017Updated Apr 29, 2020

I'm referring to this tick function: https://github.com/HubSpot/tether/blob/3d7119e590661f8c9e9e566c8a7640c189687215/src/js/tether.js#L62-L83

I don't get the first if block. What you're effectively doing is to queue up a lot of setTimeout calls:

if (typeof lastDuration !== 'undefined' && lastDuration > 16) {
      // We voluntarily throttle ourselves if we can't manage 60fps
      lastDuration = Math.min(lastDuration - 16, 250);

      // Just in case this is the last event, remember to position just once more
      pendingTimeout = setTimeout(tick, 250);
      return;
    }

E.g., the tick function is called for every scroll event. If processing is too slow, this will effectively do more than is necessary. Not only will there be too much unnecessary setTimeout calls. Rather, if scroll events are fired at a rapid rate, this might even lead to this block having no effect at all. Imagine: if 20 scroll events would be fired within let's say 10ms, there'd be no throttling at all because lastDuration will be decreased on each event until it's small enough for the if block to not run on the next scroll event.