react使用節(jié)流函數(shù)防止重復(fù)點擊問題

更新時間：2023年06月07日 09:26:35 作者：cat10month

這篇文章主要介紹了react使用節(jié)流函數(shù)防止重復(fù)點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用節(jié)流函數(shù)防止重復(fù)點擊

react里面寫防抖和節(jié)流函數(shù)

節(jié)流函數(shù)利用閉包來設(shè)置定時器，節(jié)流函數(shù)3s內(nèi)只能點擊一次，點擊后立即觸發(fā)，重復(fù)點擊無效，必須等3s之后才能點擊第二次

節(jié)流函數(shù)：

react使用節(jié)流函數(shù)

防抖函數(shù)：

防抖函數(shù)3s之后出結(jié)果，重復(fù)點擊無效，如果重復(fù)點擊了，重新計算3s時間，從點擊的時刻算起，必須等待3s時間觸發(fā)事件

react使用防抖函數(shù)

建議直接使用lodash的throttle和debounce方法

import * as _ from 'lodash';
_.throttle(()=>{
	console.log("throttle");
}, 100);
_.debounce(()=> {
  console.log("debounce");
}, 2000

react防抖和節(jié)流

定義

節(jié)流: 一段時間內(nèi)只運行一次，若在這段時間內(nèi)重復(fù)觸發(fā)，只有第一次生效
防抖: 一段時間后在執(zhí)行該事件，若在這段時間內(nèi)被重復(fù)觸發(fā)，則重新計時

節(jié)流一般用在按鈕上，防抖一般用在搜索上

節(jié)流

// 這個是點第一次的時候立即生效，接下來在一定時間內(nèi)再點就不生效了，直到這段時間過去
function throttle (fn, delay) {
? ? let flag = true;
? ? return function () {
? ? ? ? if(flag){
? ? ? ? ? ? flag = false;
? ? ? ? ? ? fn();
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? }, delay); ??
? ? ? ? } ? ?
? ? }
}
// 這個是點第一次的時候不生效，直到這段時間過去無論點了多少次只有一次生效
function throttle (fn, delay) {
? ? let flag = true;
? ? return function () {
? ? ? ? if(flag){
? ? ? ? ? ? flag = false; // 這個放在上面還是下面應(yīng)該都可以
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? flag = true;
? ? ? ? ? ? }, delay); ??
? ? ? ? } ? ?
? ? }
}

防抖

// 一段時間后執(zhí)行某段代碼，如果在這段時間之內(nèi)再次點擊了，會清除當前的定時器，重新開一個定時器
// 直到時間結(jié)束這段代碼被執(zhí)行，不然會一直重復(fù)這個過程，這段代碼一直不會被執(zhí)行
function debounce(fn, delay){
? ? let timer = null;
? ? return function(){
? ? ? ? clearTimeout(timer);
? ? ? ? timer = setTimeout(()=> {
? ? ? ? ? ? fn();
? ? ? ? }, delay)
? ? }
}

react封裝好的防抖和節(jié)流

第三方函數(shù)工具庫：lodash

安裝：npm i lodash

引入：import _ from 'lodash'

// 防抖 ?反復(fù)觸發(fā)執(zhí)行最后一次 //使用useCallback防止debounce失效
? const debounce = _.debounce;
? const getSuggestion = useCallback(
? ? debounce((val: string, type: boolean) => {
? ? ? type ? message.success(val) : message.warning(val);
? ? }, 300),
? ? [],
);
// 節(jié)流
const throttle = _.throttle;
const getSuggestion =?
throttle((val: string, type: boolean) => {
? ? type ? message.success(val) : message.warning(val);
}, 300);