節流

方法一

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 可能會導致一段時間內動作只被執行一次，界面出現閃爍。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。