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的更多相关文章

  1. Underscore.js 中 _.throttle 和 _.debounce 的差异

    两个方法都是用来控制事件的频率的,在mousemove,resize等这种高频率触发事件中,控制其响应频率可以明显提高程序的流畅性,减少资源的占用. 通过分析其源代码: _.throttle方法源码 ...

  2. 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异

    Underscore.js是一个很精干的库,压缩后只有5.2KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了JavaScript的编程. 本文仅探讨Underscore.js的两个 ...

  3. 浅谈 Unserscore.js 中 _.throttle 和 _.debounce 的差异

    来源:http://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs Unsersco ...

  4. lodash中Collection部分所有方法的总结

    总结一下lodash中Collection的所有的方法,方便对比记忆,也便于使用时候查找. 1.    判断是否符合条件:返回bool: a)  every: 判断每一值是不是都符合条件: 通过 pr ...

  5. lodash 中常用的方法

    odash是js集Array/Object/String/Function的Util于一身. lodash打包了Array/Object/String/Function里一些Api,好处是连ES6的也 ...

  6. 宏定义中的##操作符和... and _ _VA_ARGS_ _

    1.Preprocessor Glue: The ## Operator 预处理连接符:##操作符 Like the # operator, the ## operator can be used i ...

  7. python中multiprocessing.pool函数介绍_正在拉磨_新浪博客

    python中multiprocessing.pool函数介绍_正在拉磨_新浪博客     python中multiprocessing.pool函数介绍    (2010-06-10 03:46:5 ...

  8. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  9. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...

随机推荐

  1. phpRedis函数使用总结

    /*1.Connection*/ $redis = new Redis(); $redis->connect('127.0.0.1',6379,1);//短链接,本地host,端口为6379,超 ...

  2. tarjan算法--cojs 1298. 通讯问题

    cojs 1298. 通讯问题 ★   输入文件:jdltt.in   输出文件:jdltt.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 一个篮球队有n个篮球队员, ...

  3. 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 ...

  4. Bayesian Face Revisited A Joint Formulation

    很有意思的一篇人脸识别算法文章,人家写的太好,就不好意思写了,收集了一些资料,包括了原理介绍,流程图,项目网址和作者主页信息等. 参考资料: [1]. http://blog.csdn.net/csy ...

  5. NSArray与NSMutableArray 数组与可变数组的创建和遍历 复习

    1.NSArray 是一个父类,NSMUtableArray是其子类,他们构成了OC的数组. 2.NSArray的创建 NSArray * array = [[NSArray alloc]initWi ...

  6. hdu 2147 kiki's game, 入门基础博弈

    博弈的一些概念: 必败点(P点) : 前一个选手(Previous player)将取胜的位置称为必败点. 必胜点(N点) : 下一个选手(Next player)将取胜的位置称为必胜点. 必败(必胜 ...

  7. Android Studio Beat版公布!

    Android Studio Beat版公布了! 速度比0.61快爆了,有木有! L也能更新了,炫爆了,有木有!

  8. VS2010下面Empty Project使用

    VS2010下面Empty Project使用:1,添加代码HelloApp #include <afxwin.h> class CHelloApp:public CWinApp{publ ...

  9. Delegates and Events

    People often find it difficult to see the difference between events and delegates. C# doesn't help m ...

  10. unity 3D + Google Play In-app Billing (IAB)(转) 热度 3

    最近由于工作需要,研究unity如何接入Google Play以实现游戏内购买.目前IAB的实现,prime31做的插件比较好,各平台的IAB均有,但费用相对过高(几乎都是70刀左右,可怜穷小子).在 ...