通过实例学习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技术技巧大全(五)
Jan 22 Javascript
javascript 数组的方法集合
Jun 05 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 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
虫族 ZERG 概述
2020/03/14 星际争霸
php&amp;java(二)
2006/10/09 PHP
php4的session功能评述(三)
2006/10/09 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php实现json编码的方法
2015/07/30 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
出纳员岗位职责
2014/03/13 职场文书
元旦寄语大全
2014/04/10 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
完整版商业计划书
2014/09/15 职场文书
高中生逃课检讨书
2014/10/10 职场文书
师德师风自查材料
2014/10/14 职场文书
公司员工手册范本
2015/05/14 职场文书
勇敢的心观后感
2015/06/09 职场文书
暂住证证明
2015/06/19 职场文书
创业计划书之美容店
2019/09/16 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫