Vue3 + TypeScript 实现防抖（Debounce）和节流（Throttle）

在Vue3项目中结合TypeScript使用防抖（Debounce）和节流（Throttle）技术，可以有效提升应用的性能和用户体验，尤其是在处理频繁触发的事件（如滚动、窗口大小调整、输入框内容变化等）时。下面将详细介绍这两种技术的原理、使用方法以及适用场景。

一、防抖（Debounce）

原理：

防抖技术通过延迟函数的执行来减少函数的调用频率。在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。这适用于如输入框搜索、窗口大小调整等场景，确保用户停止操作后才执行相应的处理逻辑。

实现方法一：

// debounce.ts
function debounce<T extends (...args: any[]) => any>(
  func: T,
  wait: number,
  immediate = false
): (...args: Parameters<T>) => void {
  let timeout: NodeJS.Timeout | null = null;

  return function(...args: Parameters<T>) {
    const context = this;

    if (immediate && !timeout) {
      func.apply(context, args);
    }

    clearTimeout(timeout);

    timeout = setTimeout(() => {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    }, wait);
  };
}

// 使用示例
import { debounce } from './debounce';

const debouncedSearch = debounce((query: string) => {
  console.log(`Searching for: ${query}`);
  // 执行搜索操作
}, 500);

// 假设这是输入框的input事件处理函数
function handleInput(event: Event) {
  const input = event.target as HTMLInputElement;
  debouncedSearch(input.value);
}

实现方法二：

使用 lodash-es

1. 安装 lodash-es

首先，你需要在你的Vue3项目中安装lodash-es。打开终端或命令提示符，并运行以下npm命令：

npm install lodash-es --save
# 或者使用yarn
yarn add lodash-es

2. 在Vue3组件中使用lodash-es

安装完成后，你就可以在Vue3的组件中导入并使用lodash-es提供的函数了。由于lodash-es是ES模块版本，它支持树摇（tree-shaking），这意味着你可以只导入你需要的函数，从而减少最终打包文件的大小。

示例：使用_.debounce函数

假设你需要在Vue3组件中实现一个输入框的防抖功能，以防止在用户输入时过于频繁地触发某些操作（如搜索请求）。你可以这样做：

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="handleInput" />
    <!-- 其他内容 -->
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import debounce from 'lodash-es/debounce';

export default defineComponent({
  setup() {
    const searchQuery = ref('');

    // 使用lodash-es的debounce函数
    const debouncedSearch = debounce((query: string) => {
      // 这里可以放置你的搜索逻辑
      console.log('Searching for:', query);
    }, 500); // 延迟500毫秒执行

    const handleInput = (event: Event) => {
      const input = event.target as HTMLInputElement;
      debouncedSearch(input.value);
    };

    return {
      searchQuery,
      handleInput,
    };
  },
});
</script>

在这个例子中，我们导入了debounce函数，并使用它来包装我们的搜索逻辑。这样，无论用户输入多快，搜索逻辑都只会在最后一次输入后的500毫秒内执行一次。

二 、节流（Throttle）

原理：
节流技术通过限制函数的执行频率来确保函数在指定的时间间隔内只执行一次。这适用于如滚动监听、窗口大小调整等场景，确保处理函数不会过于频繁地执行。

实现方法：

// throttle.ts
function throttle<T extends (...args: any[]) => any>(
  func: T,
  limit: number
): (...args: Parameters<T>) => void {
  let lastFunc: number | null = null;
  let lastRan: number;

  return function(...args: Parameters<T>) {
    const context = this;
    const now = Date.now();

    if (!lastRan) {
      func.apply(context, args);
      lastRan = now;
    } else {
      clearTimeout(lastFunc);

      lastFunc = setTimeout(function() {
        if ((now - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = now;
        }
      }, limit - (now - lastRan));
    }
  };
}

// 使用示例
import { throttle } from './throttle';

const throttledScroll = throttle(() => {
  console.log('Scrolling...');
  // 执行滚动相关的操作
}, 1000);

// 假设这是滚动事件的处理函数
window.addEventListener('scroll', throttledScroll);

三、使用场景

• 防抖（Debounce）:

  • 搜索框输入时，减少搜索请求的频率。
  • 窗口大小调整时，延迟执行重绘或重新计算布局的逻辑。
  • 表单验证，在用户停止输入后验证。

• 节流（Throttle）:

  • 滚动事件处理，如懒加载图片、无限滚动加载内容。
  • 窗口大小调整时，限制处理函数的执行频率，避免性能问题。
  • 实时数据监控，如游戏中的帧率计算。