工具函数
防抖函数和节流函数的区别,可以查看这篇文章,写得比较好:面试官:什么是防抖和节流?有什么区别?如何实现?
防抖(debounce)
通过定时器实现。1 秒内触发了 10 次防抖,定时器是 500ms 执行一次,那么,这防抖函数里面的回调函数只会在 1.5s 之后执行,因为点击的这 10 次,都会清除定时器,导致里面的回调函数没办法执行。
file:[debounce.ts]
export function debounce<T extends (...args: any[]) => void>(
func: T,
delay: number
): (...args: Parameters<T>) => void {
let timer: number | undefined;
return function (this: any, ...args: Parameters<T>): void {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
节流(throttle)
节流不管 n 秒内执行多少次,最终都会固定时间触发。如下图所示,很直观:
file:[throttle.ts]
export function throttle<T extends (...args: any[]) => void>(
func: T,
delay: number
): (...args: Parameters<T>) => void {
let lastExecTime = 0;
return function (this: any, ...args: Parameters<T>): void {
const now = Date.now();
if (now - lastExecTime >= delay) {
func.apply(this, args);
lastExecTime = now;
}
};
}