Anti-skid (Debounce)

If high-frequency execution of an operation for N seconds triggers a function, we want to execute that function only once after N seconds. When N seconds are running out, the function is executed from zero until the end of N seconds.

The actual scenario is often the callback function that is triggered when a text is typed in an input box. Here is an example:

<input type="text" oninput="change(this)" />
Copy the code
  function change(obj){
    console.log(obj.value)
  }
Copy the code

When typing text, the change method is called in real time every time the characters in the input box are changed. If the user enters the text rapidly in succession, the target function will be called several times. This is not a good experience, of course, if the method that is called also calls the interface, the consequences can be imagined.

A simple implementation of function debounce. The code looks like this:

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

Note: fn. Apply (this, arguments); This line of code transfers the argument to the overall function(){} of return in the Debounce implementation to the function fn that we will eventually call. This line of code is the key to ensuring that fn, the target function that we wrapped by using the function debounce, is called with normal parameters.

Using the function:

<input type="text" oninput="change(this)" />
Copy the code
  const change = debounce(function(obj){
    console.log(obj.value)
  },1000);
Copy the code

The HTML part remains the same, and notice the definition of the change method, because the implementation of debounce itself is also a closure. The purpose of the closure is to privatize the timer variable for determining the time interval.

The final call is change(this), but it calls the cached (or preloaded) change method. Fn. Apply (this, arguments); The credit.

Throttle

Throttling also performs an operation at a high frequency over N seconds, resulting in a continuous call to the target function in the number of milliseconds passed in.

Again, take a real world example, such as a form scrolling event:

<style>
  .father{width:300px;height:300px;overflow:hidden scroll; }.child{width:300px;height:2500px;background-color: goldenrod; }</style>
<div class="father" onscroll="normalScroll(this)">
  <div class="child"></div>
</div>
<script>
  const normalScroll = el= > {
	console.log(el);
  }
</script>
Copy the code

These are normal scrolling events

The following is the throttling function call scroll event:

<style>
  .father{width:300px;height:300px;overflow:hidden scroll; }.child{width:300px;height:2500px;background-color: goldenrod; }</style>
<div class="father" onscroll="throttleScroll(this)">
  <div class="child"></div>
</div>
<script>
  // Function throttling implementation
  const throttle = (fn, wait) = > {
    let flag = true;
    return function() {
      if(! flag)return;
      flag = false;
      setTimeout(() = > {
        fn.apply(this.arguments);
        flag = true; }, wait); }}// Define function throttling scroll events
  const throttleScroll = throttle(el= > {
    console.log(el);
  },1000);
</script>
Copy the code

ThrottleScroll is a preloaded function defined in the same way as function buffering.

Finally, the use scenarios,

One of the most common things I’ve used recently is to call the stabilization function (interface) after typing a search keyword in the input box. There are also scenarios where the mouse moves quickly over a button or TAB, or a page window zooms in and out.

Throttling The above example is the page scroll or local div scroll call function. Throttling is different from shakiness in that it calls the target function continuously. Shakiness only calls the target function once. We use throttling as long as the requirement is met and we need to keep calling.