js防抖使用方法

防抖？

是一种在处理频繁触发的事件时用到的技术，它可以限制一个函数在一定时间内只执行一次。这在实际开发中特别适用于处理输入框输入、窗口调整等频繁触发的事件，以减少不必要的重复操作。

它们的主要目的是减少函数的执行次数，从而提高网页的响应速度和性能。

防抖的实现方式不同，但它们的思路相同：通过控制函数的执行频率，避免函数被过于频繁地调用，从而减轻浏览器的负担。

防抖的两种方法

1. 简单版防抖。

简单版防抖的原理是在事件被触发 n 秒后再执行回调函数，如果在这段时间内该事件又被触发，则重新计时。

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

这里的 func 是需要进行防抖的函数，delay 是防抖时间。函数每次执行时都会清除上一次的计时器，并重新设置计时器。如果在指定时间内没有再次触发事件，则函数就会被执行。

2.带立即执行功能的防抖

带立即执行功能的防抖可以在页面加载后立即执行一次函数，然后在指定时间内再次触发事件时不会立即执行，而是延迟指定时间后执行。

function debounce(func, delay, immediate) {
  let timer;
  return function() {
    clearTimeout(timer);
    if (immediate && !timer) {
      func.apply(this, arguments);
    }
    timer = setTimeout(() => {
      if (!immediate) {
        func.apply(this, arguments);
      }
      timer = null;
    }, delay);
  };
}

这里的 immediate 参数用于控制是否需要立即执行函数。如果为 true，则在页面加载后立即执行一次函数；如果为 false 或者不传入参数，则不会立即执行函数。其他部分与简单版防抖相同。