节流----throttle
import throttle from 'lodash/throttle';
export default class Search extends Component {
constructor(props) {
super(props)
this.handleClick = throttle(this.handleClick , 1000);
}
handleClick = (e) => {
...
}
}
render() {
return (
<div onClick={
this.handleClick}><div>
)
}
}
方法二:
import Throttle from 'lodash-decorators/throttle';
export default class Search extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick .bind(this);
}
@Throttle(300)
handleClick = (e) => {
...
}
}
render() {
return (
<div onClick={
this.handleClick}><div>
)
}
}
防抖----debounce
方法一:
import debouncefrom 'lodash/debounce';
export default class Search extends Component {
constructor(props) {
super(props)
this.handleClick = debounce(this.handleClick , 1000);
}
handleClick = (e) => {
...
}
}
render() {
return (
<div onClick={
this.handleClick}><div>
)
}
}
方法二:
import Throttle from 'lodash-decorators/debounce';
export default class Search extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick .bind(this);
}
@debounce(300)
handleClick = (e) => {
...
}
}
render() {
return (
<div onClick={
this.handleClick}><div>
)
}
}
如果事件触发是高频但是有停顿时,可以选择debounce;在事件连续不断高频触发时,只能选择 throttle ,因为 debounce 可能会导致一段时间内动作只被执行一次,界面出现闪烁。