如何解决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