94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
|
/**
|
|||
|
|
* 防抖工具函数
|
|||
|
|
* 用于防止用户快速多次点击导致重复执行
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
// 存储每个按钮的点击状态
|
|||
|
|
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);
|
|||
|
|
}
|