1. If you

Usage Scenario (the event is triggered multiple times and executed only once)

  1. To prevent users from clicking buttons such as login and SMS so fast that multiple requests are sent, you need to avoid shaking
  2. When adjusting the browser window size, the number of resize times is too frequent, resulting in too much calculation. At this time, it needs to be in place once, so it uses anti-shake
  3. The text editor saves in real time and saves after one second when there is no change operation

No matter how many times the event is triggered, it must be executed n seconds after the event is triggered. If you trigger the event within n seconds of the event being triggered, the time is recalculated and executed n seconds after the event is triggered, but the event is not triggered for n seconds before it is executed.

<input type="text" id="input" placeholder="Please enter the content" />
    <script>
      /* 1. When the event is continuously triggered (the keyboard is continuously input) and no event is triggered for a certain period of time (the keyboard is up), the event handler will execute once. If the event is triggered again before the set time, the delay will restart 2. Store the timer variable. All independent executing functions have access to the timer variable, and now the timer variable is created only once, which is unique. We just keep assigning the timer value to delay, and each clearing delay is the clearing delay of the last definition. Equivalent to multiple functions sharing the same external variable */
      function debounce(callback, delay) {
      
      if (typeofcallback ! = ='function') { // The parameter type is function
        throw new TypeError('fn is not a function');
      }

        let timer;
        return function () {
          if(timer ! = =null) {
            clearTimeout(timer);
          }
          timer = setTimeout(() = > {
            // Call the call function to the input box (apply also works)
            callback.call(this);
          }, delay);
        };
      }
      // Get the node
      let input = document.getElementById("input");
      // Listen for keystrokes
      input.oninput = debounce(function () {
        console.log(this.value);
      }, 1000);
      
2 / / way
// Can be used to pass multiple arguments
      function debounce(fun, delay) {
        return function (. args) {
          clearTimeout(fun.id);
          fun.id = setTimeout(() = > {
            fun.call(this. args); }, delay); }; }let inputb = document.getElementById("debounce");
      let debounceAjax = debounce((content, arg, obj) = > {
        console.log(" content ", content);
        console.log(" arg ", arg);
        console.log(" obj ", obj);
      }, 1000);
      inputb.addEventListener("keyup".function (e) {
      // Pass multiple arguments
        debounceAjax(e.target.value, { x: 5.y: 10 }, { z: 5.k: 10 });
      });

Copy the code

The throttle

Usage scenarios

When the event is continuously triggered, it is not executed many times, but every fixed time. When the trigger stops, the logical code is executed after a period of time

  1. Scroll event, calculate position information every second, etc
  2. Browser plays events, calculates progress information every second, and so on
// Get the node
      let input = document.getElementById("input");
      function throttle(callback, delay) {
        let flag = true;
        return function () {
          if (flag) {
            setTimeout(() = > {
              callback.call(this);
              flag = true;
            }, delay);
          }
          flag = false;
        };
      }
      input.oninput = throttle(function () {
        console.log(this.value);
      }, 1000);
      window.onscroll = throttle(function () {
        console.log("hello");
      }, 1000);
Copy the code