The difference between anti-shake and throttling

  • Buffering: the function is executed only once if the function is fired crazily within a certain interval. (You can control whether it is executed as soon as it is triggered, or the last time it is frantically triggered. Generally, the first time it is triggered is chosen to avoid delays.) If we set the interval to 500ms, then any trigger function less than 500ms is considered crazy and will only be executed once. When the trigger interval is greater than 500ms, the execution function is recalculated.

    Application scenario: Click a button

  • Throttling: The function is throttled after a certain period of time, according to the set interval. For example, if I frantically fire a function for 1 minute and set the interval to 500ms, the function will be executed every 500ms for that 1 minute.

    Application scenario: Page scrolling and dragging

Anti – shake code implementation

Parameters:

  • func ：Function, representing the function to be executed (business)
  • wait ：NumberRepresents the maximum interval between consecutive triggers. The default value500ms
  • immediate ：BooleanIs executed as soon as triggered. The default value isfalse
  1. Timer mode
function debounce(func, wait=500, immediate=false) {
  let timer = null;
  return function proxy(. params) {
    let self = this;
    if(immediate) { ! timer ? func.call(self, ... params) :null;
      clearTimeout(timer);
      timer = setTimeout(() = > {
        timer = null;
      }, wait);
    } else {
      clearTimeout(timer);
      timer = setTimeout(() = > {
        timer = null;
        func.call(self, ...params);
      }, wait);
    }
  };
}
Copy the code
  1. The time stamp
function debounce(func, wait=500, immediate=false) {
    let now = 0;
    let timer = null;
    return function proxy(. params) {
      let thenow = Date.now();
      if (immediate) {
        thenow - now >= wait ? func.call(this. params) :null;
        now = thenow;
      } else {
        clearTimeout(timer);
        timer = setTimeout(() = > {
          timer = null;
          func.call(this. params); }, wait); }}; }Copy the code

It seems to me that there is no way to execute after using timestamps, only execute first.

Throttling code implementation

function throttle(func, wait, immediate) {
  let now = 0;
  let timer = null;
  return function proxy(. params) {
    let thenow = Date.now();
    let waiting = wait - (thenow - now);
    if (immediate) {
      if (waiting <= 0) {
        func.call(this. params); now = thenow; }else {
        if(! timer) { timer =setTimeout(() = > {
            func.call(this. params); now =Date.now();
            timer = null; }, waiting); }}}else {
      if(! timer) { timer =setTimeout(
          () = > {
            func.call(this. params); now =Date.now();
            timer = null;
          },
          waiting >= 0? waiting : wait ); }}}; }Copy the code

Although there are two types of execution: immediate execution and deferred execution, deferred execution is not generally chosen