使用Youtube iframe API时clearInterval无法生效的问题

你的代码核心问题是重复创建定时器却未清理旧实例：

• onReady事件里创建了第一个定时器，当视频暂停再播放时，onStateChange又创建新的定时器，此时syncinterval变量被新的定时器ID覆盖，之前的旧定时器还在后台运行，clearInterval只能清除最后一次赋值的定时器，旧的就停不下来了。
• 状态判断用两个独立if，可能导致逻辑冲突（比如极端状态下同时触发多个状态）。

修复后的代码 #

function synctime(currtime) {
  console.log(currtime);
  //other logic here
}
var syncinterval;
var player;
player = new YT.Player("ytplayer", {
  height: "1000",
  width: "600",
  videoId: vidID,
  playerVars: {
    autoplay: true,
  },
  events: {
    onReady: () => {
      console.log("player ready");
      startSyncTimer();
    },
    onStateChange: (event) => {
      let sStatus = event.data;
      console.log(sStatus);
      if (sStatus == YT.PlayerState.PLAYING) {
        startSyncTimer();
      } else if (sStatus == YT.PlayerState.PAUSED) {
        stopSyncTimer();
      }
    },
  },
});

// 封装定时器启动逻辑，确保每次启动前清理旧定时器
function startSyncTimer() {
  stopSyncTimer();
  syncinterval = setInterval(() => {
    synctime(player.getCurrentTime());
  }, 500);
}

// 封装停止定时器逻辑
function stopSyncTimer() {
  if (syncinterval) {
    clearInterval(syncinterval);
    syncinterval = null;
  }
}

关键修复点 #

• 新增startSyncTimer和stopSyncTimer封装逻辑，每次启动定时器前先清除旧的，从根源避免多个定时器同时运行
• 用event.data获取状态（YouTube官方推荐方式，比直接调用getPlayerState更可靠）
• 使用YT.PlayerState.PLAYING/PAUSED常量代替硬编码数字，提升代码可读性
• 停止定时器后清空syncinterval变量，避免后续判断出错

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