In front-end learning we need to use a lot of events that need to be fired, but constantly firing events, resulting in constantly calling functions, will cause the browser to stall. This would be a bad experience for the user, and we could use Debounce and throttle to reduce the frequency of calls without compromising the actual performance.

Scrollbar listening

This is a very common feature, most sites have a one-click back to the top feature. The code is also simple. This button will appear when it is a certain distance from the top of the page, and when we want to go back to the top, we can just click it and go back to the top of the page. Listen for browser scroll events to return the distance between the current scroll bar and the top

        function showTop() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('Scroll bar position:' + scrollTop);
        }
        window.onscroll = showTop0000000001
Copy the code

Doesn’t it feel easy to listen for scrollbar positions with just a few lines of code?

But you see: just swiping around can print out so much data, we don’t really need it to run so often. Such frequent function calls will take up browser resources, the total browser resources are limited, we should not waste it.

Debounce

If an event is triggered within n seconds, the function execution time is recalculated.

function debounce(fn, delay) {
  let timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() = > {
      fn.apply(this.arguments); }, delay); }}Copy the code

We just need to add the anti – shake function and set the event not to execute for 1s.

        function debounce(fn, delay) {
            let timer = null 
            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(fn, delay) 
            }
        }
        function showTop() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('Scroll bar position:' + scrollTop);
        }
        window.onscroll = debounce(showTop, 1000)
Copy the code

At this point, you will find that the scrollbar position will be printed only after stopping scrolling for 1 second. But if you have a big brother“I just play, I just keep skating.”This trigger event will never trigger, and for the sake of the big brother experience, we’ll just give feedback, even if the user keeps dragging the scrollbar, after a certain interval.

We just design throttling to solve the problem!!

Throttle

Ensure that an event handler is called only once in a certain period of time when an event is continuously raised. Throttling popular explanation is like our tap water, as soon as the valve is opened, the water pouring down, holding the good traditional virtue of thrift, we have to turn the tap down a little, it is best to be as we will according to a certain rule in a certain time interval drop by drop.

function throttle(fn, cycle) {
  let start = Date.now();
  let now;
  let timer;
  return function () {
    now = Date.now();
    clearTimeout(timer);
    if (now - start >= cycle) {
      fn.apply(this.arguments);
      start = now;
    } else {
      timer = setTimeout(() = > {
        fn.apply(this.arguments); }, cycle); }}}Copy the code