Debounce stabilization

The result of the Debounce (f, MS) decorator is a wrapper that will pause calls to F until ms milliseconds have passed inactivity (no function calls, “cooling-off period”) and then call F once with the latest arguments.

In other words, Debounce acts like a secretary who “answers the phone” and waits until the quiet time of ms milliseconds before communicating the latest call information to the “boss” (calling the actual F).

For example, we have a function f and replace it with f = debounce(f, 1000).

Then, if the wrapper function is called at 0ms, 200ms, and 500ms respectively, and no other calls follow, the actual F will only be called once at 1500ms. That is: after a 1000ms cooling off period since the last call.

… Also, it gets all the arguments of the last call, and the arguments of the other calls are ignored.

If, for example,

Now let’s take a real example. Suppose the user has entered something, and we want to send a request to the server when the user’s input is complete.

We don’t need to send requests for every character input. Instead, we want to wait a while and then process the whole result.

In a Web browser, you can set up an event handler — a function that is called every time the input changes. Typically, handlers that listen for events that all key input will be called very frequently. But if we do a 1000ms debounce process for this handler, it will only be called once 1000ms after the last input.

See? The second input box calls the stabilization function, so its contents are processed 1000ms after the last input.

Debounce is therefore a good way to handle a series of events: whether they are serial keyboard inputs, mouse movements or other similar events.

It waits a given amount of time after the last call, and then runs the function that it can process the result of.

Implement an anti-shake function

function debounce(f, ms) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() = > f.apply(this.arguments), ms);
  };
}
Copy the code

Calling debounce returns a wrapper. When it is called, it schedules a call to the original function after the given ms and cancels previous such timeouts.

Throttle orifice

When called multiple times, it passes the call to F at most once per ms milliseconds.

Unlike the shaker, it’s a completely different decorator:

Debounce runs the function once after the “cooling off” period. Suitable for processing final results. Throttle will not run the function more often than ms milliseconds for the given time. Applies to regular updates that should not be done frequently.

Throttle, in other words, is like the secretary who answers the phone but disturbs the boss (actually calling f) no more than once per ms millisecond.

Throttling, for example,

Implement a throttling function

    function throttle(f, ms) {
      let timer = null;
      return function () {
       if (timer) return
       timer = setTimeout(() = >{f, apply (this.arguments);
          timer = null
        }, ms)
      }
    }
Copy the code

conclusion

Anti – shake: The change event is triggered only when the user enters the end or pause

Throttling: No matter how fast the input speed is, it will only trigger once at certain intervals