用 requestAnimationFrame 实现可暂停动画需维护 isPaused 状态，仅在非暂停时递归调用；按钮点击需禁用防连点、状态驱动文案；Canvas 暂停时停渲染以定格画面；移动端应设 touch-action: manipulation 防默认行为。
用 requestAnimationFrame 实现可暂停的动画主循环
HTML5 游戏式菜单动画不能靠 setInterval 硬拖，必须用 requestAnimationFrame 才能保证帧率稳定、节电、与屏幕刷新同步。关键在于：暂停不是停止调用，而是中断递归链条。
- 维护一个全局布尔变量
isPaused，初始为false - 动画函数末尾只在
!isPaused时才调用requestAnimationFrame(animate) - 不要在暂停时调用
cancelAnimationFrame—— 它只取消**上一帧**的请求，对后续无影响，反而可能因时间差导致跳帧
let isPaused = false;
let animationId;
function animate() {
if (!isPaused) {
// 更新逻辑 + 渲染
update();
render();
}
animationId = requestAnimationFrame(animate);
}
// 启动
animationId = requestAnimationFrame(animate);
// 暂停/恢复
function togglePause() {
isPaused = !isPaused;
}
菜单按钮绑定 click 事件时避免重复触发
用户快速连点“暂停”按钮，容易造成 isPaused 状态错乱（比如点两下后仍显示“继续”但实际在运行）。这不是 UI 问题，是事件处理没做防抖或状态同步。
- 点击后立即将按钮
disabled，操作完成后再恢复，视觉+逻辑双重锁定 - 按钮文案更新必须和
isPaused值严格同步，不要依赖 DOM 文本判断状态 - 避免在
togglePause()内直接操作按钮元素；统一用状态驱动 UI，例如：btn.textContent = isPaused ? '继续' : '暂停';
Canvas 动画暂停时保持最后一帧画面
很多教程暂停后清空画布或留白，但游戏式菜单需要“定格”——用户暂停是为了看选项、读文字、做决定。Canvas 不会自动保留帧，必须手动干预。
- 暂停前调用
ctx.getImageData(0, 0, canvas.width, canvas.height)缓存当前帧（仅当内容不频繁变化时推荐） - 更轻量做法：暂停后不再调用
clearRect，也不执行render()，原画布内容自然保留 - 注意：如果动画含半透明叠加或粒子效果，未清屏可能导致残影；此时应改用缓存帧 +
putImageData复原
移动端 touch 事件需兼容 preventDefault 风险
在 iOS Safari 或部分安卓 WebView 中，菜单按钮若用 touchstart 触发暂停，不加控制会引发页面滚动或缩放，尤其当按钮位于可滚动区域时。
立即学习“前端免费学习笔记（深入）”；
- 给菜单容器设置
touch-action: manipulation，这是最安全的 CSS 层面限制 - 如必须用
touchend，只在该事件中调用event.preventDefault()，且确保它不会阻止按钮本身的点击穿透 - 优先使用
click事件 —— 现代移动浏览器对click的 300ms 延迟已基本消除，配合fastclick库或viewport设置即可零延迟响应
pause() 函数重要得多。 
