快捷導(dǎo)航

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

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

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

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

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

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

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

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

防抖函數(shù)：

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

react使用防抖函數(shù)

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

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

react防抖和節(jié)流

定義

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

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

節(jié)流

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

防抖

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

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

第三方函數(shù)工具庫(kù)：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);