vue 封装防抖函数 并调用代码展示

当你在Vue项目中需要频繁使用防抖函数时，可以将其封装为一个公共的工具函数，方便在多个组件中重复使用。下面是一个封装防抖函数并调用的代码示例：

// utils.js
export function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

在上述示例中，我们将防抖函数封装在了一个名为`debounce`的工具函数中，并通过`export`关键字导出，以便在其他文件中使用。

接下来，我们可以在Vue组件中调用这个封装好的防抖函数：

<template>
  <div>
    <input @input="handleInput" />
  </div>
</template>

<script>
import { debounce } from "@/utils";

export default {
  methods: {
    handleInput: debounce(function () {
      // 处理输入逻辑
    }, 500), // 设置防抖时间间隔，单位为毫秒
  },
};
</script>

在上述示例中，我们通过`import`语句引入了之前封装的防抖函数，然后在`handleInput`方法中调用了`debounce`函数，并传入要执行的函数和防抖时间间隔。

这样，在用户输入时，只有在一定时间内没有再次输入时，才会执行实际的处理逻辑，从而实现了防抖效果。

通过封装防抖函数并在Vue组件中调用，可以减少代码的重复性，提高代码的可维护性和复用性。

希望以上示例对你有所帮助！如果还有其他问题，请继续提问。