通过实例学习React中事件节流防抖
2019-06-17 11:35
2723 查看
节流
方法一
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 可能会导致一段时间内动作只被执行一次,界面出现闪烁。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- java学习笔记-------通过实例来学习事件
- 通过一个用户管理实例学习路由react-router-dom知识
- 通过实例学习Java对象的构造过程
- 通过实例来学习XML DTD
- 通过实例学习 HC11 汇编递归应用
- 带着实例继续学习(4):下拉框数据填充、组件生命周期、动态绑定事件
- 通过实例学习C#(1)
- Java NIO学习(三)Selector监听事件+NIO服务器实例
- stm32f103 学习笔记 —— 04 通过事件中断实现按键检测
- Angular2学习笔记.3、通过模板调用Controller事件实现用户输入和显示,UserInput
- Android简单数据存储类SharedPreferences详解及实例(通过“记住密码”功能学习SharedPreferences)
- java-Spring通过实例讲解信息与事件
- 通过实例学习 VSL - Hello World
- 通过实例具体讲述事件委托
- 通过实例学习Virtools脚本语言VSL - 将物体排列于圆周上
- 通过一个实例来学习进程间通信之----共享内存,以及使用信号量来保护
- 通过实例学习Struts2 - 从struts-blank开始 (3)
- IOS开发基础—通过Tom猫实例学习uiimageview的基本使用
- 通过实例学习 tcpdump 命令
- IOS开发基础—通过联系人管理实例学习xib的基本使用