如何将React中的事件节流防抖改写为长尾词？

本文共计320个文字，预计阅读时间需要2分钟。

javascriptimport 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.throttledHandleSearch(); };

handleSearch=()=> { // 搜索逻辑 };

throttledHandleSearch=Throttle(this.handleSearch, 1000);}

节流

方法一

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 可能会导致一段时间内动作只被执行一次，界面出现闪烁。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。