这篇博客介绍了如何在JavaScript应用中实现搜索输入框的防抖处理，以提高性能。通过引入lodash库的debounce函数，作者展示了如何在搜索事件触发时延迟执行接口调用，确保在用户停止输入一段时间后才进行实际的搜索操作。同时，文章还给出了具体的代码示例，包括doSearchAjax接口调用逻辑和onSearchChange事件绑定。这个功能有助于减少不必要的请求，提升用户体验。
在 input 框 change 的时候需要做防抖处理，不然会取不到 value 的值
项目中如果自带debounce就可以直接用，如果没有安装一下lodash的debounce插件，
具体可以查一下官网，以下代码是项目里有插件的相关语法
import { debounce } from 'lodash'
class AppPopover extends PureComponent {
constructor() {
super()
this.doSearchAjax = debounce(this.doSearchAjax, 500)
}
// 搜索
onSearchChange = e => {
this.doSearchAjax(e.target.value)
}
doSearchAjax = value => {
const { dispatch, applicationList } = this.props;
if (value) {
const list = []
applicationList.forEach(item => {
if (item.component.name.indexOf(value) > 0) {
list.push(item)
}
})
this.setState({
appList: list,
});
} else {
dispatch({
type: 'canvas/fetchApplication',
cb: (res) => {
this.setState({
appList: res,
});
},
});
}
}
}
placeholder="搜索应用"
onChange={this.onSearchChange}
allowClear
prefix={}
/>
doSearchAjax 为项目中的调接口逻辑 onSearchChange为搜索框绑定事件
该功能是搜索框输入内容，筛选出下拉菜单的相关内容
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
