TypeScript中封装防抖，节流函数

1.防抖（Debounce）：

        防抖是指在事件触发后，延迟一定时间再执行回调函数。如果在延迟时间内又触发了该事件，则重新计时。这样可以避免在短时间内频繁触发事件导致的性能问题。

  防抖的应用场景包括：

• 输入框搜索联想：用户连续输入时，延迟一定时间再发送请求，减少请求次数。
• 窗口大小改变时的事件处理：用户调整窗口大小时，延迟一定时间再重新计算布局，避免频繁重绘。

高阶函数代码如下：

func：要进行防抖的函数；

wait：防抖函数触发的间隔；

Parameters：在typeScript中用来获取函数的参数类型关键词

ReturnType：在typeScript中用来获取函数的返回值类型关键词

Parameters和ReturnType的解释可查看我的另一篇博客：

http://t.csdnimg.cn/Yno7x

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;
};