/** * 防抖工具函数 * 用于防止用户快速多次点击导致重复执行 */ // 存储每个按钮的点击状态 const clickStates = new Map(); /** * 防抖点击装饰器 * @param {Function} func - 要防抖的函数 * @param {number} delay - 防抖延迟时间(毫秒),默认1000ms * @param {string} key - 防抖标识符,用于区分不同的点击事件 * @returns {Function} 防抖后的函数 */ export function debounceClick(func, delay = 1000, key = null) { return function(...args) { // 如果没有提供key,使用函数的名称作为key const debounceKey = key || func.name || 'default'; // 如果该key正在防抖中,直接返回 if (clickStates.has(debounceKey)) { console.log(`防抖拦截: ${debounceKey} 正在处理中...`); return; } // 设置防抖状态 clickStates.set(debounceKey, true); // 执行原函数 const result = func.apply(this, args); // 延迟后清除防抖状态 setTimeout(() => { clickStates.delete(debounceKey); console.log(`防抖解除: ${debounceKey}`); }, delay); return result; }; } /** * 创建防抖点击方法 * @param {Object} context - Vue组件实例上下文 * @param {string} methodName - 方法名 * @param {number} delay - 防抖延迟时间(毫秒),默认1000ms */ export function createDebounceMethod(context, methodName, delay = 1000) { const originalMethod = context[methodName]; if (typeof originalMethod !== 'function') { console.warn(`方法 ${methodName} 不存在`); return; } context[methodName] = debounceClick(originalMethod.bind(context), delay, methodName); } /** * 批量创建防抖方法 * @param {Object} context - Vue组件实例上下文 * @param {Array} methods - 方法名数组 * @param {number} delay - 防抖延迟时间(毫秒),默认1000ms */ export function createDebounceMethods(context, methods, delay = 1000) { methods.forEach(methodName => { createDebounceMethod(context, methodName, delay); }); } /** * 清除所有防抖状态(用于页面销毁时清理) */ export function clearAllDebounceStates() { clickStates.clear(); } /** * 检查某个key是否正在防抖中 * @param {string} key - 防抖标识符 * @returns {boolean} 是否正在防抖中 */ export function isDebouncing(key) { return clickStates.has(key); } /** * 手动清除某个key的防抖状态 * @param {string} key - 防抖标识符 */ export function clearDebounceState(key) { clickStates.delete(key); }