防抖与节流的使用场景与实现

防抖

防抖是一种常见的 JavaScript 技术,用于控制频繁触发的事件,例如窗口大小调整、鼠标移动、键盘输入等。防抖的目的是减少事件触发的频率,提高页面性能。

防抖原理是多次触发，只执行一次（类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒）。

下面是一个简单的防抖函数实现:

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

使用方法

const handleResize = debounce(() => {
  console.log('窗口大小发生变化');
}, 300);

window.addEventListener('resize', handleResize);

在这个实现中:

debounce 函数接受两个参数:
func: 需要防抖的函数
delay: 防抖的延迟时间(毫秒)
返回一个新的函数,这个新函数会在事件触发时被调用。
在新函数内部,首先检查是否有未完成的定时器,如果有则清除。
然后设置一个新的定时器,在 delay 毫秒后执行原始的 func 函数。
如果在 delay 毫秒内事件再次触发,则会重置定时器,从而达到防抖的效果。

节流

节流是另一种常见的 JavaScript 技术,用于控制频繁触发的事件。与防抖不同的是,节流会保证一个函数在一定时间内只执行一次。这在处理滚动、拖拽等高频率事件时非常有用。

节流的原理是立即触发，之后忽略用户操作，规定时间后才会再次触发（节流类似于英雄联盟里的英雄平A，一定时间内点击多次只进行攻击一次）

下面是一个简单的节流函数实现:

function throttle(func, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime > delay) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

使用方法

const handleScroll = throttle(() => {
  console.log('页面滚动');
}, 500);

window.addEventListener('scroll', handleScroll);

在这个实现中:

throttle 函数接受两个参数:
func: 需要节流的函数
delay: 节流的延迟时间(毫秒)
返回一个新的函数,这个新函数会在事件触发时被调用。
在新函数内部,首先获取当前的时间戳。
然后判断当前时间与上次执行时间的差值是否大于 delay。
如果大于 delay，则执行原始的 func 函数,并更新上次执行时间。
如果小于 delay，则不执行原始的 func 函数。