前端 JavaScript 防抖函数（debounce）
2024-08-11 10:35:19
函数防抖（debounce），就是指触发事件后，在 n 毫秒内函数只能执行一次，如果触发事件后在 n 毫内又触发了事件，则会重新计算函数延执行时间（在这里和函数节流区分一下，函数节流是在触发完事件之后的一段时间之内不能再次触发事件）。
示例代码如下：
```
function debounce(func, wait) {
let timeout;
return function () {
const context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
function onResize() {
const width = window.innerWidth;
const height = window.innerHeight;
console.log(`Width: ${width}, Height: ${height}`);
}
const debouncedResize = debounce(onResize, 200);
useEffect(() => {
window.addEventListener('resize', debouncedResize);
return () => {
window.removeEventListener('resize', debouncedResize);
}
}, [])
```