React事件中的防抖

防抖函数有很多应用场景,比如输入框change事件中请求后台数据, scroll事件加载更多等等一些高频发生的事件中。。

loadsh中的throttle函数

Creates a throttled function that only invokes func at most once per every wait milliseconds. The throttled function comes with a cancel method to cancel delayed func invocations and a flush method to immediately invoke them. Provide options to indicate whether func should be invoked on the leading and/or trailing edge of the wait timeout. The func is invoked with the last arguments provided to the throttled function. Subsequent calls to the throttled function return the result of the last func invocation.
创建一个每wait毫秒最多只调用一次的函数。throttling函数带有一个取消方法来取消延迟的func调用,还有一个刷新方法来立即调用它们。提供选项,以指示是否应该在等待超时的前边缘和/或后边缘调用func。使用提供给throttling函数的最后一个参数调用func。对throttling函数的后续调用返回上次func调用的结果。

React里面如何使用Throttle?

  1. 众所周知, React里面的事件并非DOM的原生事件,并且它也没有真正绑定在DOM元素上,它是一个React经过合成优化的对象,所以不用考虑里面属性的兼容性
  2. react里面防抖

handleChange = (function(){
let func = lodash.throttle(function(e){
console.log(e.target.value);
}, 2000)
return function(e){
e.persist();
func(e);
}
})()

posted @ 2018-08-18 20:49  paopaolee  阅读(4744)  评论(0编辑  收藏  举报