如何有效应对JavaScript中函数防抖与节流问题？

本文共计1245个文字，预计阅读时间需要5分钟。

React中使用防抖函数和节流函数+在React事件调用时，React传递给事件处理程序的程序是一个合成事件对象的实例。SyntheticEvent对象是通过合并得到的。+这意味着在事件回调被调用后，SyntheticEvent对象被创建。

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 }; }

防抖debounce

防抖 Debounce 多次触发，只在最后一次触发时，执行目标函数。