防抖 lodash.debounce
直到经历了wait时间后，才执行函数
https://lodash.com/docs/4.17.15
import debounce from 'lodash/debounce';
constructor() {
this.search = debounce(this.search, 500);
}
search = ()=> {
ajax()
}
节流 lodash.throttle
每隔wait时间，执行一次函数
https://lodash.com/docs/4.17.15
import throttle from 'lodash/debounce';
constructor() {
this.search = throttle(this.search, 500);
}
search = ()=> {
ajax()
}
React 函数组件失效
每次render 都会导致debounce第一个参数（异步请求函数）更新，进而导致debounce的闭包失效
解决办法
通过useCallback保证传入debounce的第一个参数都是同一个函数
const _onFinish = useCallback(values => {
// 所有的异步请求
getTotalStatistics({ ...baseParam, ...values });
onFinishWithSchool(values);
getSchoolListFn(values.inviteCode ? values.inviteCode : -1);
//
}, []);
const onFinish = useCallback(
debounce(_onFinish, 500, {
leading: false,
trailing: true,
}),
[_onFinish],
);
