通过实例学习React中事件节流防抖


Posted in Javascript onJune 17, 2019

节流

方法一

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
Vue js with语句原理及用法解析
Sep 03 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 #Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 #Javascript
通过js给网页加上水印背景实例
Jun 17 #Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 #Javascript
通过实例解析js简易模块加载器
Jun 17 #Javascript
如何从头实现一个node.js的koa框架
Jun 17 #Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 #Javascript
You might like
php中看实例学正则表达式
2006/12/25 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python绘制热力图示例
2019/09/27 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
初中毕业生的自我评价
2014/03/03 职场文书
法律顾问服务方案
2014/05/15 职场文书
本科生求职信
2014/06/17 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
2014年团委工作总结
2014/11/13 职场文书
2014年共青团工作总结
2014/12/10 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
行政文员岗位职责
2015/02/04 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
在 Python 中利用 Pool 进行多线程
2022/04/24 Python