通过实例学习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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
JS 表单验证大全
Nov 23 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
JavaScript面向对象精要(上部)
Sep 12 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何解决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
js下函数般调用正则的方法附代码
2008/06/22 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jQuery解析json数据实例分析
2015/11/24 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
简单说说tomcat的配置
2013/05/28 面试题
strlen的几种不同实现方法
2013/05/31 面试题
小学生志愿者活动方案
2014/08/23 职场文书
简历自我评价模板
2015/03/11 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python
Golang 并发下的问题定位及解决方案
2022/03/16 Golang