通过实例学习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 15 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
taro开发微信小程序的实践
May 21 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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
Look And Say 序列php实现代码
2011/05/22 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python生成器以及应用实例解析
2018/02/08 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python3 实现调用串口功能
2019/12/26 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Python序列化pickle模块使用详解
2020/03/05 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
初中考试作弊检讨书
2014/02/01 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
实名检举信范文
2015/03/02 职场文书
亮剑观后感
2015/06/05 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS