在寫這篇博客前，我們先來說說為啥需要防抖和節(jié)流？
馬上過春節(jié)了，又到了每年一度的搶票環(huán)節(jié)了，數(shù)以萬計的用戶在網(wǎng)上訂票，由于并發(fā)高后臺壓力大？網(wǎng)絡(luò)差？導(dǎo)致用戶在點擊訂票的時候，網(wǎng)站上馬上就沒有下文了，于是乎急切的用戶們就瘋狂的點擊著查詢？訂購等按鈕，無數(shù)重復(fù)請求被發(fā)送到后端，后端表示壓力更大了。
在這種場景下，前端有多種方法限制用戶無效請求，然而防抖和節(jié)流控制是比較優(yōu)的選擇，在沒有提升用戶操作復(fù)雜度的，用戶不感知的前提下，有效提升了有效請求率。
防抖（個人理解）：在指定時長內(nèi)，若出現(xiàn)重復(fù)操作，以最后一次操作為準(zhǔn)發(fā)送請求。
節(jié)流（個人理解）：在指定時長內(nèi)，若出現(xiàn)重復(fù)操作，以第一次為準(zhǔn)。
下面我們來說說如何實現(xiàn)防抖和節(jié)流吧？最近項目中采用vue3.0+Typescript開發(fā)，下面講講如何用Typescript實現(xiàn)防抖節(jié)流。
/utils/common.ts
/**
?*?防抖?和?節(jié)流?類
?*/
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();
????};
