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 (
            

        )
    }
}

方法二

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 (
            
        )
    }
}

防抖

写法类似。。。

区别

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