javascript - 使用循环一次为一个项目设置动画

Question

我正在尝试创建一个循环，一次为三个项目制作动画。我不断收到此错误“未捕获类型错误:无法读取未定义的属性“样式”。”我认为正在发生的事情是，由于某种原因，动画位可能会导致循环一直运行到三，并且由于位[3]不存在，所以它一直显示未定义。

var t = document.getElementById("infoBits");
var d = t.getElementsByTagName("tr")[0];
var bits = d.getElementsByTagName("td");

for (var i = 0; i < bits.length; i++) {
  var opac = 0;
  var id = setInterval(frame, 100);

  function frame() {
    if (opac == 1) {
      clearInterval(id);
    } else {
      opac += 0.1;
      bits[i].style.opacity += 0.05;
    }
  }
}

#infoBits td {
  margin: auto;
  opacity: 0;
}

<table id="infoBits" border="1">
  <tr>
    <td>Info Box 1</td>
    <td>Info Box 2</td>
    <td>Info Box 3</td>
  </tr>
</table>

https://jsfiddle.net/yps4w6f4/

对于如何使这项工作或更好的使用方法有任何建议或见解，我将不胜感激。

Answer 1

您遇到的问题是，外部循环一直执行，创建了 3 个 setIntervals 并使 i 的最终值为 3。当调用框架函数时，i 仍然引用值为 3 的外部 i 3.

您可以使用多种策略。创建一个闭包来传递 i 的值，或者可能更简单，使用绑定(bind)函数: setInterval(frame.bind({theBit:bits [i]}) 和内部框架， this.theBit.style.opacity += 0.05;

绑定(bind)函数将在外循环中求值时创建一个新函数，该函数的值等于绑定(bind)参数当时的值，因此它将创建一个不同版本的框架对于每个 i 值的函数。