/**
* 函数节流(Throttle)
* @param {Function} func 需要节流的函数
* @param {number} wait 节流间隔(毫秒)
* @returns {Function}
*/
export function throttle(func, wait = 500) {
let lastTime = 0;
let timer = null;
return function(...args) {
const now = Date.now();
const remaining = wait - (now - lastTime);
// 清除延迟执行
if (timer) {
clearTimeout(timer);
timer = null;
}
// 到达间隔时间立即执行
if (remaining <= 0) {
lastTime = now;
func.apply(this, args);
} else {
// 未到达间隔时间设置延迟执行
timer = setTimeout(() => {
lastTime = Date.now();
timer = null;
func.apply(this, args);
}, remaining);
}
};
}
/**
* 函数防抖(Debounce)
* @param {Function} func 需要防抖的函数
* @param {number} wait 防抖等待时间(毫秒)
* @param {boolean} immediate 是否立即执行
* @returns {Function}
*/
export function debounce(func, wait = 500, immediate = false) {
let timeout = null;
return function(...args) {
const context = this;
// 清除已有定时器
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
// 立即执行模式
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
// 延迟执行模式
timeout = setTimeout(() => {
func.apply(context, args);
timeout = null;
}, wait);
}
};
}
使用
vue3 setup中
// 节流点击处理(每1秒只能触发一次)
const throttledClick = throttle(() => {
console.log('Throttled click');
// 你的业务逻辑
}, 1000);
// 防抖输入处理(停止输入500ms后触发)
const debouncedInput = debounce((value) => {
console.log('Debounced input:', value);
// 你的业务逻辑
}, 500);