点击按钮时应先 cleartimeout(timerid) 再 hidemodal()，并重置 timerid 为 null；推荐用 settimeout 实现单次倒计时，每个弹窗实例持有独立 timerid，配合 data-modal-id 定位，遮罩层需正确设置 pointer-events 防点透。
点击按钮时立即清除倒计时并关闭弹窗
核心在于别只调用 close()，而要先清理定时器，否则倒计时还在后台跑，可能触发已销毁 DOM 的操作，报错 Cannot read property 'style' of null 或静默失败。
- 用
let timerId = null在外层声明，确保按钮事件能访问到当前倒计时 ID - 每次启动倒计时前先执行
clearTimeout(timerId)，避免叠加多个定时器 - 关闭弹窗后，建议将
timerId重置为null，方便后续状态判断
倒计时结束自动关闭，但允许用户提前终止
典型场景是「5 秒后自动关闭」+「点击‘稍后再说’立刻关闭」。两者不能互斥，必须共享同一套计时与清理逻辑。
- 倒计时用
setTimeout比setInterval更安全：只触发一次，无需手动清除多次 - 把关闭弹窗的逻辑抽成独立函数，如
hideModal()，供倒计时回调和按钮点击共用 - 用户点击按钮时，除了调
hideModal()，还要显式调clearTimeout(timerId)—— 否则倒计时仍会执行，可能重复关闭或报错
按钮绑定在弹窗外部，但需控制内部倒计时
常见于全局提示条（toast）或右下角浮层，关闭按钮不在弹窗 DOM 内，但必须影响其倒计时行为。关键是作用域和引用传递。
- 不要把
timerId存在闭包里然后靠事件委托“猜”哪个弹窗被点了；每个弹窗实例应持有自己的timerId - 推荐用自定义事件：弹窗初始化时
dispatchEvent(new Event('modal-ready'))，外部监听并保存对应实例引用 - 或者更直接：按钮
data-modal-id="toast-123"，弹窗带相同id属性，点击时查到对应实例再调其cancelCountdown()方法
移动端点透导致按钮失效或重复触发
在 iOS Safari 或某些安卓 WebView 中，弹窗遮罩层未正确阻止默认行为，会导致按钮点击穿透到底层页面，倒计时没停、弹窗也没关。
- 给弹窗容器加
style="pointer-events: auto;"，遮罩层加pointer-events: none;（如果它只是视觉装饰）或pointer-events: auto;+z-index确保捕获事件 - 按钮上加
ontouchstart="event.preventDefault()"防止点透，但更稳妥的是用 CSStouch-action: manipulation - 加防抖：按钮
onclick里先设disabled=true，关闭完成后才恢复，避免手抖连点两次触发两次clearTimeout却无实际危害
timerId 变量，或者忘记在 hideModal() 里调 clearTimeout。留一个变量、清一次定时器、关一次 DOM，三者必须严格配对。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
