[Anti-shake and throttling understanding]

Anti-shaking and throttling are common JavaScript performance optimization techniques, and they are usually used to handle frequently triggered events, such as mouse scrolling, window adjustment, search input, etc.

Both Debounce and Throttle optimize performance by limiting the frequency at which events are triggered, but they do so in different ways.

anti shake

• The implementation of anti-shake is: after the event is triggered, a timer is set, and if the event is triggered again within the specified time, the previous timer is cleared and a new timer is reset. Only when the event is not triggered again within the specified time, the callback function of the event will be executed.

Common anti-shake application scenarios include: search box input, drag and drop to adjust window size , etc.

The following is the sample code for anti-shake:

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

function handleInput() {
    
    
  console.log('Input value:', this.value);
}

const input = document.querySelector('input');
input.addEventListener('input', debounce(handleInput, 500));

In this example, we use the anti-shake function debounce to optimize the performance of input input events. When the user inputs in the input box, the debounce function will
execute the handleInput
callback function after 500ms. If the user enters again during this period, the previous timer will be cleared and a new timer will be reset until the user stops inputting The handleInput callback function will be executed after 500ms
.

throttling

• Throttling is implemented in the following way: an event can only be triggered once within a period of time, and if the event is triggered multiple times within the specified time, the callback function of the event will only be executed once.

Common throttling application scenarios include: scrolling loading, window adjustment , etc.

Here is a sample code for throttling:

function throttle(fn, delay) {
    
    
  let timer = null;
  let lastTime = null;
  return function(...args) {
    
    
    const now = new Date().getTime();
    if (lastTime && now - lastTime < delay) {
    
    
      clearTimeout(timer);
      timer = setTimeout(() => {
    
    
        lastTime = now;
        fn.apply(this, args);
      }, delay);
    } else {
    
    
      lastTime = now;
      fn.apply(this, args);
    }
  }
}

function handleScroll() {
    
    
  console.log('Window scrolled:', window.scrollY);
}

window.addEventListener('scroll', throttle(handleScroll, 500));

In this example, we use the throttle function throttle to optimize the performance of window scroll events. When the user scrolls the window, the throttle function will
execute the handleScroll callback function after 500ms. If the user scrolls the window again during this period, the handleScroll callback function will not be executed until
500ms later.

Note: The above example will execute an assignment first, and execute it again in 500ms