Question

我正在尝试创建一个一次激活三个项目的循环。我一直收到这个错误＆＃34; Uncaught TypeError：无法读取属性＆＃39; style＆＃39;未定义的。＆＃34;我认为发生的事情是，由于某种原因，动画位可能导致循环一直运行到3，并且因为位[3]不存在，所以它一直说未定义。

＆＃13;

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;
    }
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

https://jsfiddle.net/yps4w6f4/

我很感激有关如何使这项工作或更好的方法使用的任何建议或见解。

Answer 1

你遇到的问题是外循环一直执行，创建3个setIntervals并留下i，最终值为3.当调用frame函数时，我仍然指的是外部i的值为3.

您可以使用几种策略。要么创建一个闭包来传递i的值，要么更容易，使用bind函数：setInterval（frame.bind（{theBit：bits [i]}）和inside frame，this.theBit.style.opacity + = 0.05;

bind函数在你的外部循环中进行求值的时候会创建一个新函数，该函数的值等于bind参数在那一刻所具有的值，因此它将创建一个不同版本的框架i的每个值的函数。

Answer 2

Just UTCTime

你有两个问题：

1.运行opac === 1且opac + = 0.001时，未设置操作。因此，您的浏览器将崩溃，因为他无法增加不存在的数字。

2.间隔等待时，我会增加，所以这会导致意外行为。所以我通过将i传递给函数来修复它。

使用循环一次为一个项目制作动画

2 个答案: