通过实例学习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实现div的显示和隐藏的小例子
Jun 25 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JS实现的雪花飘落特效示例
Dec 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
PHP面向对象详解(三)
2015/12/07 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
vue中的模态对话框组件实现过程
2018/05/01 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
财务会计实习报告体会
2013/12/20 职场文书
出纳员岗位责任制
2014/02/11 职场文书
大学四年个人自我小结
2014/03/05 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
教师辞职信范文
2015/02/28 职场文书
银行服务理念口号
2015/12/25 职场文书
《包身工》教学反思
2016/02/23 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
如何利用Python实现一个论文降重工具
2021/07/09 Python