添加人脸检测验证后JavaScript setInterval每秒多次执行问题修复请求

问题根源 #

你遇到的核心问题是：添加人脸超时检测逻辑后，每次用户重新播放视频时，没有清理之前创建的setInterval定时器，导致多个定时器实例同时在后台运行，最终表现为每秒执行多次情绪检测。

具体修复步骤 #

• 全局存储定时器ID：先声明一个变量专门保存定时器的唯一ID，比如let emotionDetectionTimer = null;
• 创建新定时器前先清除旧实例：每次启动检测逻辑时，先判断如果已有定时器在运行，就用clearInterval清除它，再创建新的定时器
• 触发暂停时同步清除定时器：在5秒未检测到人脸的处理逻辑里，一定要同步清除检测定时器，避免视频暂停后定时器仍在后台运行

关键代码修复示例 #

// 全局变量存储定时器和人脸超时计时器
let emotionDetectionTimer = null;
let noFaceTimeout = null;

// 启动情绪检测的函数（视频播放时调用）
function startEmotionCheck() {
  // 先清除旧定时器，防止重复创建
  if (emotionDetectionTimer) {
    clearInterval(emotionDetectionTimer);
  }
  // 重置人脸超时计时器
  if (noFaceTimeout) {
    clearTimeout(noFaceTimeout);
  }

  // 创建新的1秒定时器
  emotionDetectionTimer = setInterval(async () => {
    // faceapi捕获情绪的原有逻辑
    const faceDetections = await faceapi.detectAllFaces(videoEl, detectionOpts)
      .withFaceLandmarks()
      .withFaceExpressions();

    if (faceDetections.length > 0) {
      // 检测到人脸，重置5秒超时器
      clearTimeout(noFaceTimeout);
      noFaceTimeout = setTimeout(() => {
        // 5秒未检测到人脸的处理逻辑
        videoEl.pause();
        // 关闭摄像头轨道
        videoEl.srcObject.getTracks().forEach(track => track.stop());
        // 清除检测定时器
        clearInterval(emotionDetectionTimer);
        emotionDetectionTimer = null;
        alert("未检测到人脸，视频已暂停，请重新播放");
      }, 5000);

      // 原有情绪处理逻辑...
    }
  }, 1000); // 确保这里是1000毫秒，即每秒执行一次
}

// 重新播放视频时，调用startEmotionCheck()即可

额外注意事项 #

• 所有触发视频播放的入口（首次播放、重新播放）都要调用startEmotionCheck函数，不要直接创建setInterval
• 页面关闭、视频手动暂停时，最好主动清除定时器，避免内存泄漏

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