react 中實(shí)現(xiàn)函數(shù)防抖功能

函數(shù)的節(jié)流和防抖是一個(gè)老生常談的話題了,下面來嘮嘮,直入主題。
什么是函數(shù)的防抖?
函數(shù)在規(guī)定的時(shí)間內(nèi)執(zhí)行。下面這個(gè)例子 就是在2s的時(shí)候才執(zhí)行函數(shù)。
常用場景:用戶名驗(yàn)證,郵箱驗(yàn)證。
為什么要用?
誰用誰知道,用了都說好!大大提高的性能,減輕服務(wù)端壓力(驗(yàn)證有調(diào)用后臺接口的時(shí)候)


tool.js文件
export function deBounce(func, wait) {
  let timeOut = null;
  return function (...args) {
    clearTimeout(timeOut);//一定要清除定時(shí)器
    timeOut = setTimeout(() => {
      func(...args);
    }, wait);
  };
}

------------------我是史上最帥的分割線-----------------------------------

調(diào)用的時(shí)候
import { deBounce} from 'tool'

//使用onChange 做為演示
onChange = deBounce(() => {//格式一定要這么寫?。。‘?dāng)然箭頭函數(shù) 你也可以傳方法
    //此處放置需要防抖的功能
    
},2000);

一個(gè)防抖函數(shù)功能就完成了,在實(shí)際開發(fā)中都是直接封裝成庫直接調(diào)用
以前開發(fā)過的功能,一直沒做歸納總結(jié),溫故而知新,才會理解更加透徹。
例子親測 可直接使用,希望能幫到大家。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容