当前位置: 首页>编程语言>正文

Typescript 实现防抖和节流

在写这篇博客前,我们先来说说为啥需要防抖和节流?

马上过春节了,又到了每年一度的抢票环节了,数以万计的用户在网上订票,由于并发高后台压力大?网络差?导致用户在点击订票的时候,网站上马上就没有下文了,于是乎急切的用户们就疯狂的点击着查询?订购等按钮,无数重复请求被发送到后端,后端表示压力更大了。

在这种场景下,前端有多种方法限制用户无效请求,然而防抖和节流控制是比较优的选择,在没有提升用户操作复杂度的,用户不感知的前提下,有效提升了有效请求率。

防抖(个人理解):在指定时长内,若出现重复操作,以最后一次操作为准发送请求。

节流(个人理解):在指定时长内,若出现重复操作,以第一次为准。

下面我们来说说如何实现防抖和节流吧?最近项目中采用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();

????};


https://www.xamrdz.com/lan/5l81848844.html

相关文章: