Simple realization of anti chattering throttling

Time:2021-9-22
In our daily work, we will always encounter some time continuous triggers (such as search query, users constantly call the back-end API to query data, wide trigger resize or scroll time during the search process). At this time, in order not to waste resources and optimize performance, we often use the anti shake / throttling method
Anti shake definition: after a function is executed once, it cannot be executed again within a certain waiting period. If this function is triggered within the waiting time, the waiting time will be recalculated.
Throttling definition: specifies a unit time within which only one callback function that triggers an event can be executed. If an event is triggered multiple times within the same unit time, only one can take effect.
 
This situation must have been encountered in normal work. After clicking the button once, the event has not been handled, and the button is clicked again. Under normal circumstances, this situation must be avoided. At this time, I will write this in the code (using timer instead of interface).
click
</code></pre>
<div>
<div>  // function submit(e) {</div>
<div>  //   setTimeout(() => {</div>
<div>  //     console.log(1);</div>
<div>  //   }, 1000)</div>
<div>  // }</div>
<div>  function submit(e, delay) {</div>
<div>    e.target.disabled = true;</div>
<div>    setTimeout(() => {</div>
<div>      console.log(1);</div>
<div>      e.target.disabled = false;</div>
<div>    }, delay)</div>
<div>  }</div>
</div>
<pre><code>
In addition to the click event, the scroll event is also very important to pay attention to. Each time the scroll bar scrolls to the bottom, it will request data. In order to avoid repeatedly sending requests due to rolling back and forth, the above method is certainly not applicable. See the code
  
    function debounce(fn, delay) {
      var timer = null;
      return function () {
        if (timer !== null) {
          clearTimeout(timer);
        }
        timer = setTimeout(fn, delay);
      }
    }

    function handle() {
      console.log(‘A’);
    }

    window.addEventListener(“scroll”, debounce(handle, 1000));
  
The interface will not be requested until 1 second after the operation stops.
Supplement:
This way of writing click event is very limited, because it can only be used in the button tag or input tag. What if the event is not bound to the button tag or input tag? (this is not recommended. Try to use the button label for the button)
click
  
    function throttle(fn, delay) {
      let valid = true;
      return function () {
        if (!valid) {
          return false;
        }
        fn();
        valid = false;
        setTimeout(() => {
          valid = true;
        }, delay)
      }
    }
    function show() {
      console.log(1);
    }
    var inner = throttle(show, 1500);