部分笔记本设备上setTimeout被忽略导致事件无延迟问题求助

根因分析 #

• 原有逻辑完全依赖固定时长的setTimeout控制流程，未绑定媒体播放的实际状态：硬编码的16000ms是默认指引音频的总时长，但如果遇到客户端开启全局媒体倍速、音频加载异常被跳过、浏览器自动拦截未触发用户交互的自动播放等场景，定时器触发和媒体实际播放进度就会完全脱节。
• 未校验PHP输出的$video1length合法性：如果该变量在部分场景下输出空值、0或者非数值内容，setTimeout的第二个参数会被部分浏览器默认解析为0，直接触发回调，看起来就像定时器被完全忽略。
• 主线程定时器调度受环境影响：嵌套setTimeout运行在页面主线程，当部分笔记本设备CPU占用过高、浏览器开启后台标签页节流、存在第三方插件/安全软件篡改原生setTimeout方法时，多个到期的定时器会被合并执行，出现无延迟连续触发的问题。

修复方案 #

1. 替换固定时长定时器为媒体事件驱动，完全跟随音频/视频的实际播放进度调度后续流程，从根源上避免时长不匹配的问题。
2. 处理媒体播放的异步异常：浏览器默认禁止未经过用户主动交互的媒体自动播放，原有代码未捕获play()方法的异步拒绝错误，会出现媒体未播放但流程仍往下走的问题。
3. 改用async/await改写异步逻辑，避免嵌套回调的可读性问题，也更容易添加异常捕获逻辑。
4. 异常场景兼容：如果必须保留固定时长兜底，可以增加参数合法性校验，避免定时器时长被解析为0；如果需要更稳定的计时能力，可将定时器逻辑放到Web Worker中运行，不受主线程任务阻塞影响。
5. 客户端排查：出现问题的设备可先通过浏览器无痕模式运行测试，禁用所有第三方插件，排除注入脚本篡改原生API的可能。

改写后参考代码 #

// 必须绑定到用户主动点击的事件回调中，避免自动播放被拦截
async function startOralTest() {
  try {
    // 初始1s等待
    await new Promise(resolve => setTimeout(resolve, 1000));

    // 播放指引音频，等待音频播放完成再走下一步
    const guideAudio = new Audio('/audio/listening01.mp3');
    await new Promise((resolve, reject) => {
      guideAudio.onended = resolve;
      guideAudio.onerror = reject;
      guideAudio.play().catch(reject);
    });

    // 播放题目视频，等待视频播放完成再走下一步
    const testVideo = document.getElementById("myVideo1");
    await new Promise((resolve, reject) => {
      testVideo.onended = resolve;
      testVideo.onerror = reject;
      testVideo.play().catch(reject);
    });

    // 视频结束后额外等待1s
    await new Promise(resolve => setTimeout(resolve, 1000));

    // 启动录制流程
    clockSetUp();
    const beepAudio = new Audio('/audio/beep.mp3');
    // 提示音播放失败不阻断主流程
    beepAudio.play().catch(err => console.warn('提示音播放失败', err));
    const mic = document.getElementById("mic1");
    recordParts1("<?php echo ('1_' . $myID1) ?>");
    mic.src = "/images/micGreen.png";

    // 等待30s录制结束
    await new Promise(resolve => setTimeout(resolve, 30000));
    mic.src = "/images/mic.png";
    document.getElementById("myNext2").style.display = "block";
  } catch (err) {
    console.error('测试流程异常', err);
    // 可添加用户可见的错误提示，引导重试
  }
}

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