1.防抖(Debounce):
防抖是指在事件触发后,延迟一定时间再执行回调函数。如果在延迟时间内又触发了该事件,则重新计时。这样可以避免在短时间内频繁触发事件导致的性能问题。
防抖的应用场景包括:
- 输入框搜索联想:用户连续输入时,延迟一定时间再发送请求,减少请求次数。
- 窗口大小改变时的事件处理:用户调整窗口大小时,延迟一定时间再重新计算布局,避免频繁重绘。
高阶函数代码如下:
func:要进行防抖的函数;
wait:防抖函数触发的间隔;
Parameters:在typeScript中用来获取函数的参数类型关键词
ReturnType:在typeScript中用来获取函数的返回值类型关键词
Parameters和ReturnType的解释可查看我的另一篇博客:
type DebounceFunction = (...args: any[]) => void;
export const useDebounce = <T extends DebounceFunction>(func: T, wait: number): T => {
let timeout: ReturnType<typeof setTimeout> | undefined;
return function (this: any, ...args: Parameters<T>): void {
const context = this;
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
} as T;
};
2.节流(Throttle):
节流是指在一定时间内只执行一次回调函数。如果在该时间段内多次触发事件,只有第一次触发会执行回调函数,后续的触发会被忽略。
节流的应用场景包括:
- 页面滚动事件:滚动过程中触发的事件处理,可以通过节流来减少触发次数,提高性能。
- 鼠标移动事件:鼠标移动过程中触发的事件处理,可以通过节流来控制触发频率,避免过多的计算和渲染。
高阶函数代码如下:
func:要进行防抖的函数;
wait:防抖函数触发的间隔;
Parameters:在typeScript中用来获取函数的参数类型关键词
type ThrottleFunction = (...args: any[]) => void;
export const useThrottle = <T extends ThrottleFunction>(func: T, wait: number): T => {
let inThrottle: boolean = false;
return function (this: any, ...args: Parameters<T>): void {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => {
inThrottle = false;
}, wait);
}
} as T;
};