Vue 项目中使用防抖与节流

防抖函数

在某个事件触发后，延迟一段时间执行函数，如果在这段时间内再次触发该事件，则重新计时。常见的应用场景是搜索框输入时，当用户连续输入时，只在输入完成后触发搜索请求。

节流函数

在某个事件触发后，间隔一段时间执行函数，如果在这段时间内再次触发该事件，则忽略该事件。常见的应用场景是滚动事件，当用户滚动页面时，只在一定时间间隔内执行滚动处理函数。

封装防抖节流函数：

// 防抖函数封装
export function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流函数封装
export function throttle(func, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

将这些函数定义在一个单独的文件中（例如utils.js），然后在需要使用的