- 如下代码,data数据超过2千条时,每次输入字符过滤时非常卡
<AutoComplete
dataSource={data}
onChange={this.handleChange }
allowClear={true}
filterOption={
(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
}
/>
其原因: 每次输入变化,data就要从2000多条数据中过滤出目标元素,一过滤就导致AutoComplete下拉列表得变化,浏览器得重新绘制下拉列表的Dom,导致浏览器卡
解决办法一
采用防抖函数,在间隔时间内,连续输入字符串只在最后一个字符串发生时才触发事件(onChange默认输入内容已改变就触发事件)
- 防抖函数
let timer;
export const debounce = (func, wait ) => {
// let timer = 0;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, wait);
};
};
- 使用AutoComplete使用防抖函数
<AutoCo