如何解决js函数防抖、节流出现的问题-创新互联

React中使用防抖函数和节流函数

站在用户的角度思考问题,与客户深入沟通,找到临朐网站设计与临朐网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、申请域名虚拟主机、企业邮箱。业务覆盖临朐地区。

在React事件调用时,React传递给事件处理程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消。 这是出于性能原因。 因此,您无法以异步方式访问该事件。React合成事件官方文档


所以在用防抖或节流函数封装时,异步方式访问事件对象出现问题。解决的方法如下:


方法一:调用合成事件对象的persist()方法 event.persist && event.persist() //保留对事件的引用


方法二:深拷贝事件对象 const event = e && {...e} //深拷贝事件对象


function debounce(func, wait=500) {
let timeout; // 定时器变量
return function(event){
clearTimeout(timeout); // 每次触发时先清除上一次的定时器,然后重新计时
event.persist && event.persist() //保留对事件的引用
//const event = e && {...e} //深拷贝事件对象
timeout = setTimeout(()=>{
func(event)
}, wait); // 指定 xx ms 后触发真正想进行的操作 handler
};
}

网站栏目:如何解决js函数防抖、节流出现的问题-创新互联
文章网址:http://scjbc.cn/article/gpigd.html

其他资讯