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），然后在需要使用的组件中引入并使用它们。

如下是在Vue组件中使用防抖和节流函数的示例：

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="handleSearch" />
  </div>
</template>
<script>
import { debounce, throttle } from '@/utils';
export default {
  data() {
    return {
      searchQuery: '',
    };
  },
  methods: {
    // 使用防抖函数处理搜索输入
    handleSearch: debounce(function () {
      // 在这里执行搜索操作
      console.log('Perform search:', this.searchQuery);
    }, 300),
    // 使用节流函数处理滚动事件
    handleScroll: throttle(function () {
      // 在这里执行滚动处理逻辑
      console.log('Handle scroll event');
    }, 200),
  },
};
</script>

在上述代码中，handleSearch函数使用了防抖函数debounce，在输入框的@input事件中触发搜索操作。handleScroll函数使用了节流函数throttle，在滚动事件中触发滚动处理逻辑。

这样，你就可以方便地在Vue项目中使用防抖和节流功能了。记得在需要的地方引入封装的函数并适当调整防抖或节流的延迟时间来满足你的需求。