VUE前端实现防抖节流 Lodash

方法一：采用Lodash工具库

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

（1）采用终端导入Lodash库

$ npm i -g npm
$ npm i --save lodash

（2）应用

示例：搜索框输入防抖

在这个示例中，我们希望用户在输入框中停止输入 500 毫秒后才执行搜索操作，避免频繁请求.

示例：滚动事件节流

在这个示例中，我们希望当用户滚动页面时，每隔 1 秒才记录一次滚动事件，避免频繁触发回调函数。

Scroll down to see the effect

• 解释：

• • 当用户滚动页面时，throttledScroll 函数会在 1 秒内最多触发一次，避免滚动时回调函数被频繁调用。
  • 这优化了页面滚动的性能，特别是在回调函数较为复杂时。

示例：结合 leading 和 trailing 选项

假设我们希望在用户第一次触发事件时立即执行函数，并在停止触发 1 秒后再次执行。

方法二：自定义防抖、节流函数

（1）在utils文件夹下创建lodash.ts文件，里面定义防抖节流函数

// 防抖函数
export function debounce(fn: Function, delay: number) {
  let timer: ReturnType | null = null;

  return function (this: any, ...args: any[]) {
    // 清除上一个定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 设置新的定时器
    timer = setTimeout(() => {
      fn.apply(this, args); // 使用apply确保this和参数正确传递
    }, delay);
  };
}

  
// 节流函数
export function throttle(fn: Function, delay: number) {
  let lastTime = 0;

  return function (this: any, ...args: any[]) {
    const now = Date.now();

    // 如果距离上次执行时间已超过指定时间间隔，则执行函数
    if (now - lastTime >= delay) {
      lastTime = now;  // 更新上次执行时间
      fn.apply(this, args);
    }
  };
}

（2）应用

防抖

• 方式一：

• 方式二：

节流

应用场景

防抖 (debounce):

手抖了。。。多点了好几次，一定时间内只执行一次。（年纪大了手抖）

• 功能：只有在用户停止触发事件一段时间后，才会执行回调函数。
• 应用场景：输入框搜索、窗口大小调整（resize）、表单提交等。

节流 (throttle):

好比点了两次下拉刷新列表页面，他不会马上直接执行两次，是在你定义的一定时间间隔前提前，先执行第一次在执行第二次

• 功能：在指定的时间间隔内，只执行一次函数。如果触发频繁，函数执行会被限制在每个时间间隔内最多执行一次。
• 应用场景：滚动事件、鼠标移动事件、resize 事件等。