在写这篇博客前,我们先来说说为啥需要防抖和节流?
马上过春节了,又到了每年一度的抢票环节了,数以万计的用户在网上订票,由于并发高后台压力大?网络差?导致用户在点击订票的时候,网站上马上就没有下文了,于是乎急切的用户们就疯狂的点击着查询?订购等按钮,无数重复请求被发送到后端,后端表示压力更大了。
在这种场景下,前端有多种方法限制用户无效请求,然而防抖和节流控制是比较优的选择,在没有提升用户操作复杂度的,用户不感知的前提下,有效提升了有效请求率。
防抖(个人理解):在指定时长内,若出现重复操作,以最后一次操作为准发送请求。
节流(个人理解):在指定时长内,若出现重复操作,以第一次为准。
下面我们来说说如何实现防抖和节流吧?最近项目中采用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();
????};