JS防抖和节流详解

一、防抖和节流作用

防抖和节流是两种常见的优化性能的方法，用于控制某些高频率触发的事件的执行次数，从而提高页面的响应速度和性能。

二、防抖

1、概念

在一定时间内，多次触发同一个事件，只执行最后一次触发的事件。

比如说给的限定时间300ms
~如果在300ms内没有再次触发事件，那么执行函数
~如果在200ms内再次触发函数，那么当前的计时取消，重新开始计时

2、防抖函数实现

function debounce(func, delay) {
  let timer; // 定时器变量
  return function() {
    const context = this; // 保存this上下文
    const args = arguments; // 保存函数参数
    clearTimeout(timer); // 清除上一次的定时器
    timer = setTimeout(() => { // 创建一个新的定时器
      func.apply(context, args); // 执行函数
    }, delay);
  };
}

该函数接收两个参数，分别是需要防抖的函数和防抖延迟时间。函数内部定义了一个变量timer，用于保存定时器的返回值。

在函数内部返回一个新函数，该函数内部保存了this上下文和函数参数，并清除上一次的定时器，创建一个新的定时器，并在延迟时间后执行原函数。

使用该函数可以轻松地实现防抖逻辑，比如：

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('input', debounce(function() {
  // 这里写搜索逻辑
}, 500));

在输入框输入时，每次输入都会触发防抖函数，但只有在500ms内没有再次输入时，才会执行搜索逻辑。这样可以避免频繁地发送搜索请求，提高页面性能。

3、应用场景

防抖适用于高频率触发的事件，如搜索框输入、窗口大小改变等。

三、节流

1、概念

在一定时间内，多次触发同一个事件，只执行一次事件。

~如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不在工作，直至过了这段时间才重新生效
~在某个时间内(比如300ms)，某个函数只能被触发一次

2、节流函数的实现

function throttle(func, delay) {
  let timer; // 定时器变量
  let lastTime = 0; // 上一次执行时间
  return function() {
    const context = this; // 保存this上下文
    const args = arguments; // 保存函数参数
    const nowTime = +new Date(); // 获取当前时间
    const remainingTime = delay - (nowTime - lastTime); // 剩余时间
    if (remainingTime <= 0) { // 如果剩余时间小于等于0
      clearTimeout(timer); // 清除定时器
      lastTime = nowTime; // 更新上一次执行时间
      func.apply(context, args); // 执行函数
    } else if (!timer) { // 如果定时器不存在
      timer = setTimeout(() => { // 创建一个新的定时器
        lastTime = +new Date(); // 更新上一次执行时间
        timer = null; // 清空定时器变量
        func.apply(context, args); // 执行函数
      }, remainingTime);
    }
  };
}

该函数接收两个参数，分别是需要节流的函数和节流延迟时间。函数内部定义了两个变量，一个用于保存定时器的返回值，一个用于保存上一次执行时间。

在函数内部返回一个新函数，该函数内部保存了this上下文和函数参数，并根据当前时间计算出剩余时间。如果剩余时间小于等于0，则清除定时器，更新上一次执行时间，并执行原函数。如果剩余时间大于0且定时器不存在，则创建一个新的定时器，在剩余时间后执行原函数。

使用该函数可以轻松地实现节流逻辑，比如：

window.addEventListener('scroll', throttle(function() {
  // 这里写滚动逻辑
}, 500));

在滚动页面时，每次滚动都会触发节流函数，但只有在500ms内没有再次滚动时，才会执行滚动逻辑。这样可以减少频繁地执行回调函数，提高页面性能。

4、应用场景

节流适用于持续触发的事件，如滚动页面、拖拽等。