preface

Write this blog is mainly to record, originally I am also vaguely understand, I believe that a little understanding of the treasure son also know, this problem interview is also a high-frequency problem

What is anti-shake

The debounce policy is to delay the callback after an event is triggered for n seconds. If the event is triggered again within n seconds, the timer is reset.

This will have to wait, and if you keep pushing, I’ll reset the clock!

Application scenarios of anti-shake

When you enter a string of characters in the input box, you can use the anti-shake policy to execute the query request only after the input is complete. In this way, the query request is effectively reduced

Less request times, saving request resources;

code


<body>
  <button id="debounce">Tap me!</button>

  <script>
    window.onload = function() {
      // 1. Get the button and bind the event
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce));
    }

    // 2. Function of anti-shake function, accept parameter transfer
    function debounce(fn) {
      // create a flag to store the return value of the timer
      let timeout = null;
      return function() {
        // Every time the user clicks/input, the previous timer is cleared
        clearTimeout(timeout);
        // create a new setTimeout.
        // This ensures that the button is clicked within the interval
        // If the user still clicks, the fn function will not be executed
        timeout = setTimeout(() = > {
          fn.call(this.arguments);
        }, 1000);
      };
    }

    // 3. Need to handle the event of shaking prevention
    function sayDebounce() {
      / /... Some of the work that needs to be done is done here
      console.log("Quaking succeeded!");
    }

  </script>
</body>

Copy the code

What is throttling

Throttling, as the name suggests, reduces the frequency with which events occur over a period of time.

Application scenarios of throttling

(1) The mouse continuously triggers an event (such as click), only triggers once per unit of time;

(2) Lazy loading to listen to the position of the scroll bar, but do not have to slide triggered every time, can reduce the frequency of calculation, and do not have to waste CPU resources;

code


<body>

  <button id="throttle">Point me throttle!</button>

  <script>
    window.onload = function() {
      // 1. Get the button and bind the click event
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle));
    }

    // 2
    function throttle(fn) {
      // save a tag with a closure
      let canRun = true;
      return function() {
        // check whether the flag is true at the beginning of the function. If it is not true, the function is interrupted
        if(! canRun) {return;
        }
        // 6. Set canRun to false to prevent it from being executed before it is executed
        canRun = false;
        // 7
        setTimeout( () = > {
          fn.call(this.arguments);
          After executing the event (such as calling the interface), reset the flag to true
          canRun = true;
        }, 1000);
      };
    }

    // events that need to be throttled
    function sayThrottle() {
      console.log("Throttle successful!");
    }

  </script>
</body>


Copy the code

Summarize the difference between anti-shake and throttling

  • Anti – shake: If the event is triggered frequently, anti – shake can ensure that only the most trigger takes effect! The previous N triggers will be ignored!
  • Throttling: Throttling can reduce the frequency of event firing if the event is fired frequently, so throttling is selectively executing a portion of the event!

ps:

If the content has the wrong place welcome to point out (feel looking do not understand uncomfortable want to make fun of completely no problem); If there is help, welcome to like and collect, please reprint the source, if there is a problem also welcome private communication