vue3 防抖函数全局

可以使用 Vue3 中的 provide 和 inject 来实现全局防抖函数。

首先定义一个防抖函数：

const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

然后在应用的根组件中使用 provide 来提供全局的防抖函数：

import { createApp, inject } from 'vue';

const app = createApp({
  // ...
  provide: {
    debounce: debounce,
  },
  // ...
});

app.mount('#app');

接着在需要使用防抖函数的组件中使用 inject 来获取全局的防抖函数：

import { inject } from 'vue';

export default {
  // ...
  methods: {
    handleClick: inject('debounce')(function () {
      // 防抖函数内部的代码
    }, 500),
  },
  // ...
};

在上面的代码中，我们使用了 inject 来获取全局的防抖函数，并将其作为 handleClick 方法的第一个参数传入，同时还传入了防抖延迟时间 500ms。

这样就实现了全局防抖函数的功能。需要注意的是，如果使用了多个防抖函数，需要为它们设置不同的名称，以免发生冲突。