JS anti-shake and throttling, implemented by hand

1. What is anti-shake and throttling?

Function stabilization and throttling are both methods to control the frequency of event triggering.

Anti-shake: Assuming that the function continues to be executed multiple times, we want to let it calm down before executing. That is, when the event continues to be triggered, the function is not executed at all, and it is executed after a period of time after the last trigger.

Throttling: Let the function execute in a controlled manner, rather than execute it once uncontrolled triggering.
What is temperance? It is executed only once in a period of time.
Throttling, as the name implies, will reduce the frequency of triggering within a period of time, and only one task will be executed within a specified time interval.

Anti-shake scene

• Verification of text input, send AJAX request for verification after continuous text input, just verify once.
  • Monitor an input box, trigger the change event after the text changes
  • Use the keyup event directly to trigger the change event frequently
  • Anti-shake: the change event will only be triggered when the user input ends or pauses
• When the user quickly clicks to turn the page, he only needs to execute the number of pages that the user wants to reach the last time. The number of intermediate pages is not the user wants to see. Using the anti-shake function can effectively reduce the number of requests sent

Throttling scene

• Lazy loading needs to monitor and calculate the position of the scroll bar, and use throttling to get it at a certain time frequency

• Implementation of drag and drop function of DOM elements (mousemove)

  • When dragging an element, get the dragged position of the element at any time
  • Directly use the drag event, it will be triggered frequently, it is easy to cause a freeze
  • Throttling: No matter how fast the dragging speed is, it will be triggered every 100ms

2. Initial realization

Anti-shake

const input = document.querySelector('#input');
let timer = null;
input.addEventListener('keyup', function () {
    
    
  clearTimeout(timer);
  timer = setTimeout(() => {
    
    
    // 模拟触发change事件
    console.log(input.value);
  }, 500);
});

Throttling

const div1 = document.getElementById('div1');

let timer = null;

div1.addEventListener('drag', e => {
    
    
  if (timer) {
    
    
    return;
  }
  timer = setTimeout(() => {
    
    
    console.log(e.offsetX, e.offsetY);
    timer = null;
  }, 100);
});

Three, function packaging

Anti-shake package

function debounce(fn, delay = 500) {
    
    
  // timer 是在闭包中的
  let timer = null;
  return function () {
    
    
    clearTimeout(timer);
    timer = setTimeout(() => {
    
    
      fn.apply(this, arguments);
    }, delay);
  };
}

input.addEventListener(
  'keyup',
  debounce(function () {
    
    
    console.log(input.value);
  })
);

Throttle package

div1.addEventListener(
  'drag',
  throttle(function (e) {
    
    
    console.log(e.offsetX, e.offsetY);
  })
);

function throttle(fn, delay = 100) {
    
    
  let timer = null;
  return function (e) {
    
    
    if (timer) {
    
    
      return;
    }
    timer = setTimeout(() => {
    
    
      fn.apply(this, arguments);
      // fn(e)
      timer = null;
    }, delay);
  };
}