JavaScript视频指定时间执行代码异常：背景色切换失效及递归溢出

你的代码存在几个关键问题，导致背景色不切换且出现“过多递归”错误，具体问题和修正方案如下：

问题分析 #

• 事件绑定方式错误
  你在else分支中写了addEventListener("timeupdate", video())，这里的video()是直接执行函数，而非传递函数引用。而且每次进入这个分支都会重复绑定timeupdate事件，导致函数被频繁调用，最终触发递归溢出。
• 获取body元素的方式错误
  document.getElementById("body")无法正确获取body元素（默认body标签没有id="body"属性），应该直接用document.body获取。
• 重复绑定事件引发逻辑混乱
  每次执行video函数时，若未达到指定时间就会再次绑定timeupdate事件，导致同一事件被绑定无数次，函数被反复调用，既浪费性能又引发错误。

修正后的代码 #

const video = document.getElementById("video");
const body = document.body;

// 专门负责检查视频时间的函数
function checkVideoTime() {
    if (video.currentTime >= 3.466) {
        body.style.backgroundColor = "black";
        // 达到条件后移除事件监听，避免后续不必要的执行
        video.removeEventListener("timeupdate", checkVideoTime);
    }
}

// 视频开始播放时，仅绑定一次timeupdate事件
video.addEventListener("playing", () => {
    video.addEventListener("timeupdate", checkVideoTime);
});

修正逻辑说明 #

1. 提前获取video和body元素，避免重复DOM查询
2. 用单独的函数处理时间检查逻辑，职责更清晰
3. 视频开始播放时仅绑定一次timeupdate事件，避免重复绑定
4. 达到指定时间后立即移除事件监听，防止函数被反复执行

内容的提问来源于stack exchange，提问作者Nooofs1