React中事件节流防抖

节流

方法一

import Throttle from 'lodash-decorators/throttle';

export default class Search extends Component {
    constructor(props) {
      super(props)
      this.handleSearch = this.handleSearch.bind(this);
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.handleSearch();
    }
    @Throttle(300)
    handleSearch() {
    ...
    }
     render() {
        return (
            <form onSubmit={this.handleSubmit}><form>
        )
    }
}

方法二

import throttle from 'lodash/throttle';

export default class Search extends Component {
    constructor(props) {
      super(props)
      this.handleSearch = throttle(this.handleSearch, 1000);
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.handleSearch();
    }
    handleSearch = () => {
    ...
    }
    render() {
        return (
            <form onSubmit={this.handleSubmit}><form>
        )
    }
}

防抖

写法类似。。。

区别

debounce 和 throttle 各有特点,在不同的场景要根据需求合理的选择。如果事件触发是高频但是有停顿时,也就是结束后一段时间内触发一次,期间如果再次触发,计时刷新,直到该段时间过后触发,可以选择debounce;在事件连续不断高频触发时,一段时间内最多触发一次,只能选择 throttle ,因为 debounce 可能会导致一段时间内动作只被执行一次,界面出现闪烁。