react 中使用 lodash 中的 _.throttle
1.场景:
首次调用执行一次,一定时间内再次调用,不再执行。
2.实现
debounce (函数去抖) 多次触发,只在最后一次触发时,执行目标函数。
_.debounce(func, [wait=0], [options={}])
throttle (函数节流)限制目标函数调用的频率,比如:1s内不能调用2次。
_.throttle(func, [wait=0], [options={}])
lodash在opitons参数中定义了一些选项,主要是以下三个:
leading,函数在每个等待时延的开始被调用,默认值为false
trailing,函数在每个等待时延的结束被调用,默认值是true
maxwait,最大的等待时间,因为如果debounce的函数调用时间不满足条件,可能永远都无法触发,因此增加了这个配置,保证大于一段时间后一定能执行一次函数
根据leading和trailing的组合,可以实现不同的调用效果:
leading-false,trailing-true:默认情况,即在延时结束后才会调用函数
leading-true,trailing-true:在延时开始时就调用,延时结束后也会调用
leading-true, trailing-false:只在延时开始时调用
deboucne还有cancel方法,用于取消防抖动调用
方式一:
test = () => {
console.log('--------------11111---------------');
this.fun();
} fun = _.debounce(function(e){
console.log('--------------22222---------------');
}, 5000,{
leading: true,
trailing: false,
})
首次点击时执行,连续点击且时间间隔在5s之内,不再执行,间隔在5s之外再次点击,执行。
方式二:
test = () => {
console.log('--------------11111---------------');
this.fun();
} fun = _.throttle(function(e){
console.log('--------------22222---------------');
}, 5000,{
leading: true,
trailing: false,
})
首次点击时执行,连续点击且间隔在5s之内,5s之后自动执行一次(注:连续点击次数时间之后小于5s,则不会自动执行),间隔在5s之外再次点击,执行。
.
react 中使用 lodash 中的 _.throttle的更多相关文章
- Underscore.js 中 _.throttle 和 _.debounce 的差异
两个方法都是用来控制事件的频率的,在mousemove,resize等这种高频率触发事件中,控制其响应频率可以明显提高程序的流畅性,减少资源的占用. 通过分析其源代码: _.throttle方法源码 ...
- 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异
Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...
- 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异
来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...
- lodash中Collection部分所有方法的总结
总结一下lodash中Collection的所有的方法,方便对比记忆,也便于使用时候查找. 1. 判断是否符合条件:返回bool: a) every: 判断每一值是不是都符合条件: 通过 pr ...
- lodash 中常用的方法
odash是js集Array/Object/String/Function的Util于一身. lodash打包了Array/Object/String/Function里一些Api,好处是连ES6的也 ...
- 宏定义中的##操作符和... and _ _VA_ARGS_ _
1.Preprocessor Glue: The ## Operator 预处理连接符:##操作符 Like the # operator, the ## operator can be used i ...
- python中multiprocessing.pool函数介绍_正在拉磨_新浪博客
python中multiprocessing.pool函数介绍_正在拉磨_新浪博客 python中multiprocessing.pool函数介绍 (2010-06-10 03:46:5 ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- 教你如何在React及Redux项目中进行服务端渲染
服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...
随机推荐
- phpRedis函数使用总结
/*1.Connection*/ $redis = new Redis(); $redis->connect('127.0.0.1',6379,1);//短链接,本地host,端口为6379,超 ...
- tarjan算法--cojs 1298. 通讯问题
cojs 1298. 通讯问题 ★ 输入文件:jdltt.in 输出文件:jdltt.out 简单对比时间限制:1 s 内存限制:128 MB [题目描述] 一个篮球队有n个篮球队员, ...
- Codeforces Round #194 (Div. 1) B. Chips 水题
B. Chips Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/333/problem/B D ...
- Bayesian Face Revisited A Joint Formulation
很有意思的一篇人脸识别算法文章,人家写的太好,就不好意思写了,收集了一些资料,包括了原理介绍,流程图,项目网址和作者主页信息等. 参考资料: [1]. http://blog.csdn.net/csy ...
- NSArray与NSMutableArray 数组与可变数组的创建和遍历 复习
1.NSArray 是一个父类,NSMUtableArray是其子类,他们构成了OC的数组. 2.NSArray的创建 NSArray * array = [[NSArray alloc]initWi ...
- hdu 2147 kiki's game, 入门基础博弈
博弈的一些概念: 必败点(P点) : 前一个选手(Previous player)将取胜的位置称为必败点. 必胜点(N点) : 下一个选手(Next player)将取胜的位置称为必胜点. 必败(必胜 ...
- Android Studio Beat版公布!
Android Studio Beat版公布了! 速度比0.61快爆了,有木有! L也能更新了,炫爆了,有木有!
- VS2010下面Empty Project使用
VS2010下面Empty Project使用:1,添加代码HelloApp #include <afxwin.h> class CHelloApp:public CWinApp{publ ...
- Delegates and Events
People often find it difficult to see the difference between events and delegates. C# doesn't help m ...
- unity 3D + Google Play In-app Billing (IAB)(转) 热度 3
最近由于工作需要,研究unity如何接入Google Play以实现游戏内购买.目前IAB的实现,prime31做的插件比较好,各平台的IAB均有,但费用相对过高(几乎都是70刀左右,可怜穷小子).在 ...