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. 2018BNU校赛总决赛

    题解是qls的题解我就懒得写了23333 A塞特斯玛斯塔 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit IO Format: %lld ...

  2. MySql - GROUP BY 和 HAVING关键字

    本文主要针对GROUP BY 和 HAVING两个关键字进行分析 使用测试表如下: 测试前,只知道GROUP BY 这个关键字的作用是根据一个字段进行分组,去重.HAVING对分组设置条件. 具体分组 ...

  3. 【manacher】模板

    考试竟然写错了manacher!太耻辱了!所以赶快又敲了一遍模板!!一定不能错了aaaa #include<iostream> #include<cstdio> #includ ...

  4. hdu 3435 图回路分割

    将一个无向图分成许多回路,回路点交集为空,点幷集为V.幷最小化回路边权和. #include <cstdio> #include <cstring> #include < ...

  5. bzoj 2724 在线区间众数

    如果不是在线,就是裸的莫队. 但这道题要求在线,然后就不会了.. 标程: http://hi.baidu.com/__vani/item/ecc63f3527395283c2cf2945 算法主要是分 ...

  6. JDK源码(1.7) -- java.util.ListIterator<E>

    java.util.ListIterator<E> 源码分析(JDK1.7) ------------------------------------------------------- ...

  7. MySQL主库切换那些事

    最近连续经历了机架掉电和交换机挂掉,着实切了不少主库,虽然过程心惊胆跳,但是也算是上过战场,经过了实战演习,相信TEAM中的小伙伴们对于切主库已经可以驾轻就熟了. MySQL的主库切换也属于DBA的一 ...

  8. React Native中树 TreeView 实现(1)

    背景: 基于项目需要,在搜索第三方类库后没有很好的效果后决定动手实现. 开发环境: React Native 0.44 模型: 由于数据已经全部取出,不需要分级异步加载,故而只需要实现层级展示即可. ...

  9. 树莓派(Debian)系统开启iptables的raw表实现日志输出

    说明:可能Debian默认不开启iptables的raw表,所以无法通过其实现日志跟踪. 日志跟踪:http://www.cnblogs.com/EasonJim/p/8413563.html 解决方 ...

  10. ADC Power Supplies

    http://www.planetanalog.com/author.asp?section_id=3041&doc_id=563055 Jonathan Harris, Product Ap ...