如何在for循环内等待按钮点击？音频对比试验场景实现

兄弟，你现在用同步for循环肯定不行啊——JavaScript会直接把所有轮次的代码一口气跑完，根本不会等音频播放完，更不会等用户点击按钮。得换成异步控制流来实现每一步的等待，我给你两个靠谱的方案：

方案一：用Async/Await写清晰的流程（推荐） #

这种方式代码逻辑一目了然，完全贴合你“先播音频1→再播音频2→等用户点击→下一轮”的需求。

完整可复用代码 #

// 假设你已经初始化好这些变量
this.numTrials = 5; // 总试验次数
this.audio1 = new Audio('你的音频1路径');
this.audio2 = new Audio('你的音频2路径');
const sameBtn = document.getElementById('same-btn'); // 相同按钮
const differentBtn = document.getElementById('different-btn'); // 不同按钮

// 封装：播放单个音频，等它播完再继续
function playAudio(audio) {
  return new Promise((resolve) => {
    audio.currentTime = 0; // 重置播放起点，避免上次没播完的残留
    audio.play().then(() => {
      // 监听音频结束事件，只触发一次
      audio.addEventListener('ended', resolve, { once: true });
    }).catch(err => {
      console.error('音频播放出错:', err);
      resolve(); // 就算播失败，也别卡流程
    });
  });
}

// 封装：等用户点击按钮，返回用户选择
function waitForUserInput() {
  return new Promise((resolve) => {
    // 写个一次性点击处理函数，避免重复绑定
    function handleClick(choice) {
      return () => {
        sameBtn.removeEventListener('click', handleSame);
        differentBtn.removeEventListener('click', handleDiff);
        resolve(choice);
      };
    }
    const handleSame = handleClick('same');
    const handleDiff = handleClick('different');
    
    sameBtn.addEventListener('click', handleSame);
    differentBtn.addEventListener('click', handleDiff);
  });
}

// 核心试验流程
async function startTrials() {
  for (let i = 0; i < this.numTrials; i++) {
    console.log(`第${i+1}轮试验开始`);
    
    // 第一步：播音频1，等它结束
    await playAudio(this.audio1);
    // 可选：两个音频之间加个短暂间隔，让用户分清楚
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 第二步：播音频2，等它结束
    await playAudio(this.audio2);
    
    // 第三步：等用户点按钮
    const userChoice = await waitForUserInput();
    console.log(`用户选了：${userChoice}`);
    
    // 这里可以加记录结果的逻辑，比如存到数组里
    // this.trialRecords.push({ trial: i+1, choice: userChoice });
  }
  alert('所有试验完成啦！');
}

// 注意：最好在用户第一次交互后启动（比如点个"开始试验"按钮），避免浏览器自动播放限制
document.getElementById('start-btn').addEventListener('click', () => {
  startTrials();
});

方案二：用递归兼容旧环境 #

如果你的项目要支持不兼容async/await的老浏览器，用递归一步步推进试验也可以：

let currentTrial = 0;
const totalTrials = this.numTrials;

function runNextTrial() {
  if (currentTrial >= totalTrials) {
    console.log('试验全部搞定！');
    return;
  }
  console.log(`第${currentTrial+1}轮开始`);
  
  // 先播音频1
  this.audio1.currentTime = 0;
  this.audio1.play().then(() => {
    this.audio1.addEventListener('ended', () => {
      // 间隔500ms播音频2
      setTimeout(() => {
        this.audio2.currentTime = 0;
        this.audio2.play().then(() => {
          this.audio2.addEventListener('ended', () => {
            // 等用户点击按钮
            function handleChoice(choice) {
              return () => {
                sameBtn.removeEventListener('click', handleSame);
                differentBtn.removeEventListener('click', handleDiff);
                console.log(`用户选择：${choice}`);
                currentTrial++;
                runNextTrial(); // 触发下一轮
              };
            }
            const handleSame = handleChoice('same');
            const handleDiff = handleChoice('different');
            sameBtn.addEventListener('click', handleSame);
            differentBtn.addEventListener('click', handleDiff);
          }, { once: true });
        });
      }, 500);
    }, { once: true });
  });
}

// 启动试验
runNextTrial();

几个重要提醒 #

1. 浏览器自动播放限制：现在大部分浏览器都不允许页面加载后自动播音频，所以一定要让用户先点个“开始试验”按钮再启动流程，不然音频会播不出来。
2. 音频重置：每次播放前一定要设置audio.currentTime = 0，不然如果用户中途暂停过，下次播放会从暂停的位置继续。
3. 事件清理：每次用户点击按钮后要移除事件监听，不然多次绑定会导致一次点击触发多次回调。

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