通过实例学习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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jquery实现弹出层效果实例
May 19 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
vue之数据交互实例代码
Jun 20 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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
FCKeditor添加自定义按钮
2008/03/27 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Js面试算法详解
2018/04/08 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
Python模块WSGI使用详解
2018/02/02 Python
python网络应用开发知识点浅析
2019/05/28 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
Python urllib3软件包的使用说明
2020/11/18 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
什么是View State?
2013/01/27 面试题
StringBuilder和String的区别
2015/05/18 面试题
公司感恩节活动策划书
2014/10/11 职场文书
离婚协议书范文2015
2015/01/26 职场文书
会计岗位职责
2015/02/03 职场文书
北京英文导游词
2015/02/12 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
详解OpenCV曝光融合
2022/04/29 Python
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL