函數(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é),溫故而知新,才會理解更加透徹。
例子親測 可直接使用,希望能幫到大家。