全屏切换事件需防抖的是后续副作用函数而非事件本身，如 resizeCanvas、renderChart 或高清资源加载；应将防抖应用于具体函数，配合 overflow: hidden 等 CSS 避免布局抖动，并注意定时器清理与上下文绑定。
网页全屏切换（如 `document.fullscreenchange` 或 `fullscreenerror`）本身不高频，但常被误用于触发重绘、尺寸重算或图表渲染等耗时操作，导致视觉抖动或重复执行。防抖不是用来“阻止切换”，而是让后续副作用函数只响应最终稳定状态。
哪些全屏切换场景需要防抖
真正要防抖的，是切换后立刻执行的逻辑，而不是切换事件本身：
- 监听 fullscreenchange 后立即调用
resizeCanvas()或renderChart()，而用户反复进入/退出全屏 - 在全屏激活后自动拉取高清资源或重载数据，但未等待状态稳定就发起请求
- 结合 ResizeObserver 响应全屏尺寸变化时，因连续回调造成 canvas 宽高反复设置，引发滚动条闪烁
防抖的核心做法：包装副作用函数
不要把防抖加在事件监听器上，而是加在它要调用的具体函数里。例如：
function updateLayout() {canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
redraw();
}
const debouncedUpdate = debounce(updateLayout, 250);
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
debouncedUpdate(); // ✅ 只在稳定后执行一次
}
});
配合 CSS 避免布局抖动
仅靠防抖还不够。全屏切换可能短暂改变 body 尺寸，触发浏览器滚动机制。建议同步加一条样式规则：
立即学习“Java免费学习笔记（深入）”；
body {overflow: hidden;
margin: 0;
}
这样可防止因 canvas 尺寸微小变化导致的滚动条闪现，和防抖形成双重保障。
注意定时器清理与上下文绑定
如果页面卸载或组件销毁，记得清除残留定时器，避免内存泄漏：
- 使用带 cancel 方法的防抖实现（如 Lodash 的
debounce(fn, ms)返回对象含cancel()） - 在组件
beforeUnmount（Vue）或useEffect cleanup（React）中调用debouncedFn.cancel() - 确保
this和参数正确传递——推荐用箭头函数或显式.bind()，或改用现代写法：debounce((...args) => fn(...args), delay)
