本文详解 settimeout 失效的典型原因：错误地在事件触发时立即调用显示函数，再用 settimeout 递归调用自身，导致弹窗瞬间出现。正确做法是将 settimeout 置于动画逻辑末尾，确保延迟执行仅发生一次。
本文详解 settimeout 失效的典型原因：错误地在事件触发时立即调用显示函数，再用 settimeout 递归调用自身，导致弹窗瞬间出现。正确做法是将 settimeout 置于动画逻辑末尾，确保延迟执行仅发生一次。
在 Magic 8 Ball 交互中，目标是：用户点击按钮 → 播放 3 秒视频动画 → 动画结束后延迟显示答案弹窗。但原代码中 onclick="spin(); show()" 导致 show() 立即执行，弹窗瞬间可见；而 setTimeout(show, 3000) 只是 3 秒后再次调用 show()——此时弹窗早已显示，视觉上毫无变化，形成“setTimeout 无效”的错觉。
根本问题在于逻辑耦合错误：show() 不应由点击直接触发，而应作为动画完成后的响应动作。更健壮的解法是利用 <video></video> 元素的 ended 事件，而非依赖固定延时（因视频实际时长可能受加载、编码影响）：
<button id="8bbtn" onclick="spin()"> <video id="video1" width="800" preload="auto"><source src="./media/8ball.mp4" type="video/mp4"></source></video></button>
const myVideo = document.getElementById("video1");
const popup = document.getElementById("splashscrn");
function spin() {
myVideo.currentTime = 0; // 重置视频，支持重复点击
myVideo.play().catch(e => console.warn("Video play failed:", e));
// ✅ 正确方式：监听视频播放结束，再显示弹窗
myVideo.onended = () => {
popup.style.display = 'block';
};
}
// ⚠️ 替代方案（仅当无法监听 ended 时使用）：
// setTimeout(() => {
// popup.style.display = 'block';
// }, 3000);
关键注意事项：
- 避免在
onclick中同时调用多个函数并期望它们按序执行——DOM 事件是同步的，show()会立刻运行； -
setTimeout(show, 3000)中传入show（函数引用）而非show()（函数调用），否则会立即执行并返回undefined； - 使用
video.onended比硬编码3000ms更可靠，能真实匹配动画完成时机； - 添加
myVideo.currentTime = 0和play().catch()提升兼容性，防止重复点击失败或视频卡顿。
通过解耦动画触发与 UI 响应，并采用事件驱动而非时间驱动，即可精准实现“动画结束→弹窗浮现”的预期效果。
