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>
    <button @click="handleClick">点击</button>
  </div>
</template>

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

export default {
  methods: {
    handleClick() {
      const debounceHandleClick = debounce(() => {
        // 处理点击逻辑
      }, 500); // 设置防抖时间间隔，单位为毫秒

      debounceHandleClick();
    },
  },
};
</script>

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

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

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

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