在写这篇博客前，我们先来说说为啥需要防抖和节流？
马上过春节了，又到了每年一度的抢票环节了，数以万计的用户在网上订票，由于并发高后台压力大？网络差？导致用户在点击订票的时候，网站上马上就没有下文了，于是乎急切的用户们就疯狂的点击着查询？订购等按钮，无数重复请求被发送到后端，后端表示压力更大了。
在这种场景下，前端有多种方法限制用户无效请求，然而防抖和节流控制是比较优的选择，在没有提升用户操作复杂度的，用户不感知的前提下，有效提升了有效请求率。
防抖（个人理解）：在指定时长内，若出现重复操作，以最后一次操作为准发送请求。
节流（个人理解）：在指定时长内，若出现重复操作，以第一次为准。
下面我们来说说如何实现防抖和节流吧？最近项目中采用vue3.0+Typescript开发，下面讲讲如何用Typescript实现防抖节流。
/utils/common.ts
/**
* 防抖 和 节流 类
*/
export class ActionControl {
timeout = 0;
fn: any = null;
wait = 0;
preActionTime = 0;
constructor(fn: any, wait: number) {
this.fn = fn;
this.wait = wait;
}
debounce(): void {
if (this.timeout !== 0) clearTimeout(this.timeout); //清除这个定时器
this.timeout = setTimeout(this.fn, this.wait);
}
throttle(): void {
if (this.preActionTime === 0) this.preActionTime = new Date().getTime();
const timeBetween = new Date().getTime() - this.preActionTime;
console.log(timeBetween);
if (timeBetween >= this.wait) {
this.timeout = setTimeout(() => {
this.fn();
this.preActionTime = 0;
}, this.wait);
}
}
}
//使用方法，亲测有效
import { ActionControl } from "@/utils/common";
let ac: any = null;
//防抖批量操作
const batchAction = () => {
if (ac === null) {
ac = new ActionControl(doBatchAction, 500);
}
ac.throttle();
};
