It’s all about debounce function and the ‘scroll’ event I care about.

As I understand it, debounce function will prevent event listener to fire every time the event it listen to occurred. Scrolling and resizing are the best candidates because the function that listen to those activities runs almost repeatedly and will significantly impact the browser’s performance. debounce function will set the duration for event listener to delay until certain amount of time have elapsed since the last time debounce function was invoked. debounce makes use of window.setTimeout, and for good reason. Lodash and Underscore.js have one of this kind.

Well, I cherry-pick the wording from blogs and documentations and cannot make sure its originality. I am tired by the way.

Here’s the demo and a bit of explanation below…