遍历数组为Audio绑定onended事件时，索引指向异常的技术求助

嘿，这个问题我太熟了！你遇到的是JavaScript里经典的闭包与变量作用域坑，咱们一步步拆解：

问题根源 #

你用var声明的循环变量i是函数/全局作用域的——整个循环里只有这一个i变量。当你给每个audio绑定onended事件回调时，这些函数并没有立即执行，而是等音频播放结束才触发。这时候循环早就跑完了，i的值已经变成了allSpots.length（也就是2），所有回调共享同一个i的引用，自然只能拿到循环结束时的变量值，导致无法对应到正确的spot对象。

三种解决方案 #

方案1：用let代替var（ES6+推荐） #

let拥有块级作用域，每次循环迭代都会创建一个全新的i变量，每个回调函数引用的都是当前迭代的那个i：

for(let i=0; i< allSpots.length; i++) {
  allSpots[i].audio.onended = function(){
    $("[data-spot=" + allSpots[i].name + "]").removeClass('fa-pause');
    $("[data-spot=" + allSpots[i].name + "]").addClass('fa-play');
  }
}

方案2：用forEach遍历数组（最简洁） #

forEach的回调函数会为每个数组元素创建独立作用域，直接拿到当前迭代的spot对象，完全避开作用域问题，代码也更清爽：

allSpots.forEach(function(spot) {
  spot.audio.onended = function(){
    // 用模板字符串和toggleClass简化代码
    $(`[data-spot="${spot.name}"]`).toggleClass('fa-pause fa-play');
  }
});

方案3：立即执行函数（IIFE，兼容旧环境） #

如果需要兼容不支持ES6的环境，可以用立即执行函数创建独立作用域，手动保存当前迭代的spot对象：

for(var i=0; i< allSpots.length; i++) {
  // 把当前的spot作为参数传入IIFE，形成独立作用域
  (function(currentSpot) {
    currentSpot.audio.onended = function(){
      $("[data-spot=" + currentSpot.name + "]").removeClass('fa-pause');
      $("[data-spot=" + currentSpot.name + "]").addClass('fa-play');
    }
  })(allSpots[i]);
}

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