vue全局的防抖节流函数

### 在 Vue 中实现全局防抖和节流函数 #### 使用 Axios 封装防抖功能 通过创建一个全局的 `axios` 实例，可以将防抖逻辑集成到 HTTP 请求中。这使得每次触发请求时都可以自动应用防抖机制[^1]。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 1000, }); let debounceRequest; instance.interceptors.request.use(config => { clearTimeout(debounceRequest); debounceRequest = setTimeout(() => { return config; }, 500); // 设置防抖时间为 500ms }); ``` #### 利用 Mixins 实现全局注册 为了使防抖和节流函数在整个项目中可用，可以通过 Vue 的 `mixins` 功能将其定义为全局方法。这样任何组件都能轻松调用这些工具函数[^2]。 ```javascript // debounceAndThrottle.js export const debounceMixin = { methods: { $debounce(func, delay) { let timerId; return (...args) => { clearTimeout(timerId); timerId = setTimeout(() => func.apply(this, args), delay); }; } }, }; export const throttleMixin = { methods: { $throttle(func, limit) { let inThrottle; return (...args) => { if (!inThrottle) { inThrottle = true; func.apply(this, args); setTimeout(() => (inThrottle = false), limit); } }; } }, }; ``` 接着，在项目的入口文件中引入并注册这两个 mixins： ```javascript import Vue from 'vue'; import { debounceMixin, throttleMixin } from './path/to/debounceAndThrottle'; Vue.mixin(debounceMixin); Vue.mixin(throttleMixin); ``` #### 结合 Watcher 和 Debounce 方法 在某些场景下可能需要监听数据变化，并对其施加防抖处理。例如当输入框的内容发生变化时延迟发送网络请求[^3]。 ```javascript watch: { searchQuery(newVal, oldVal) { this.$debounce(() => { console.log('执行查询:', newVal); }, 800)(); } }, ``` 以上方式不仅简化了代码结构还增强了可维护性和复用率。 ---