Anti-shake and throttling realization and multi-scene application deformation

Debounce

Anti-shake function: A function that needs to be triggered frequently. Within the specified time, only the last time will take effect, the previous ones will not take effect.

Debounce: No matter how high the frequency of event triggering is, it must be executed n seconds after the event is triggered. If you trigger an event within n seconds of the triggering of an event, the time of the new event shall prevail, n It executes after seconds. In short, the event will not be triggered within n seconds after the event is triggered, and it will be executed again after n seconds.

1. Application scenario one

Scenario: Delayed execution of functions

For continuous event response we only need to execute a callback:

• Every resize/scroll triggers a statistical event
• Baidu query, verification of account text input (after entering text continuously, send AJAX request for verification, just verify the last time)

Effect : Multiple triggers are delayed execution.
achieve:

function debounce(event, time) {
      let timer = null;
      return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          event.apply(this, args);
        }, time);
      };
    }

The effect is: continuous point trigger, triggering multiple events only execute the last time.

2. Application scenario two

Scenario: Sometimes we need to make the function execute immediately, and then wait for n seconds to execute after the subsequent event is triggered. When it is triggered multiple times in the future, only the last time will be executed.

We give the debounce function a flag to indicate whether to execute it immediately.

Effect : The event is triggered continuously, executed twice in total: once at the beginning and once for the last time. When it is triggered multiple times in the future, only the last time will be executed.
achieve:

function debounce(event, time, flag) {
      let timer = null;
      return function (...args) {
        clearTimeout(timer);
        if (flag && !timer) {
          event.apply(this, args);
        }
        timer = setTimeout(() => {
          event.apply(this, args);
        }, time);
      };
    }

3. Application scenario three

Execute once immediately, such as button anti-shake, to prevent the user from clicking multiple times (the next call must be more than wait before the time interval from the previous call is triggered).

When the user points a star to the interviewMap, we hope that the user will call the interface when the first click is made, and change the appearance of the star button after success, the user can immediately get feedback whether the star is successful, this situation applies to the anti-shake that is executed immediately Function, it is always called for the first time, and the time interval between the next call and the previous call must be greater than wait to trigger.

Effect : trigger the event multiple times and execute it immediately.
achieve:

      function debounce(func, wait, immediate) {
        var timeout;

        return function (...args) {
          if (timeout) {
            clearTimeout(timeout);
          }
          if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function () {
              timeout = null;
            }, wait);
            if (callNow) func.apply(this, args);
          } else {
            timeout = setTimeout(() => func.apply(this, args), wait);
          }
        };
      }

Throttling

Throttle: No matter how high the frequency of the event is triggered, it will only be executed once per unit time.

Time stamp implementation:

Effect : The first event must be triggered, the last time it will not be triggered

function throttle(event, time) {
      let pre = 0;
      return function (...args) {
        if (Date.now() - pre > time) {
          pre = Date.now();
          event.apply(this, args);
        }
      }

Timer implementation

Effect : The first event will not be triggered, the last time it must be triggered

function throttle(event, time) {
      let timer = null;
      return function (...args) {
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            event.apply(this, args);
          }, time);
        }
      }
    }

Combined version

Effect : The combined version of timer and time stamp is also equivalent to the combined version of throttling and anti-shake, which will be triggered the first and last time

function throttle(event, time) {
      let pre = 0;
      let timer = null;
      return function (...args) {
        if (Date.now() - pre > time) {
          clearTimeout(timer);
          timer = null;
          pre = Date.now();
          event.apply(this, args);
        } else if (!timer) {
          timer = setTimeout(() => {
            event.apply(this, args);
          }, time);
        }
      }
    }