debounce防抖动
debounce的英文是防反跳,也叫防止误动作、防抖动
典型的用途有,键盘按键的去抖动,防抖动
类似的写前端页面时常会遇到类似的场景:
用户输入要搜索的文字而触发搜索,调用后台接口去返回数据,然后前端页面列表刷新显示
但是如果每次输入一个字符后就立刻触发后台搜索,则往往在一次性输入多个字符串时会导致中间的无效搜索,也会导致性能浪费和界面卡顿。
解决办法是:
当用户输入一个字符时,延迟触发搜索,比如延迟500ms:
- 在500ms内,如果用户没有在继续输入,再去调用接口返回搜索结果
- 在500ms内,如果用户又继续输入其他字符了,则重新触发,重新计算,再延迟500ms判断是否输入
由此可以实现:
不论用户是一次性只输入单个字符串,还是一段时间内连续输入多个字符串,最终都只是触发一次搜索,返回结果,刷新页面,使得用户体验很好。
对于上述逻辑,可以自己写代码实现:
在获得用户输入的事件时,设置一个定时器,计算倒计时。
也可以利用:
这个概念本身叫做debounce
有第三方库帮忙实现这个debounce的效果,比如lodash的debounce
比如之前写的:ReactJS中实现,延迟搜索的效果的代码:
import { h, Component } from 'preact';
import style from './style.less';
import PropTypes from 'prop-types';
import _ from "lodash";
export default class Search extends Component {
state = {
value : null
}
constructor(props) {
super(props);
this.onInput = this.onInput.bind(this);
this.onClick = this.onClick.bind(this);
}
componentWillMount() {
this.delayedOnInput = _.debounce(this.props.onInputChange, this.props.debounceTimeout);
}
onInput(e){
this.setState({value : e.target.value});
e.persist();
this.delayedOnInput(this.state.value);
}
onClick(e){
if (this.props.onClick) {
this.props.onClick(e);
}
}
render () {
return (
<div class={style.cz_top_box}>
<ul>
<a>
<li class={style.min_box}>
<input
type="search"
value={this.state.value}
placeholder={this.props.placeholder}
onClick={this.onClick}
onInput={this.onInput} />
</li>
</a>
</ul>
</div>
);
}
}
Search.PropTypes = {
debounceTimeout : PropTypes.number,
placeholder : PropTypes.string,
onInputChange : PropTypes.func.isRequired,
onClick : PropTypes.func
};
Search.defaultProps = {
debounceTimeout : 500,
placeholder : "请输入"
};