如何使用向后迭代的 settimeout 设置 for 循环？

Question

我可能以完全错误的方式处理这个问题，因为在 javascript 方面我还是个新手，但本质上我正在尝试做的事情（为了一点乐趣) 是让 table 的单元格在单击时更改颜色，然后让北、东、南、西的单元格依次更改为不同的颜色（想想炸弹人中的炸弹效果）。

到目前为止，我已经使用以下代码成功地使南向工作：

function timeOutDown(i) {
  let bubbleRowPositive = col + rowArray[i];
  let bubbleRowPositiveId = document.getElementById(bubbleRowPositive);

  setTimeout(function() {
    bubbleRowPositiveId.style.backgroundColor = "#AA3333";
  },i * 50);
}

for (let i=row; i<colArray.length; i++) {
  timeOutDown(i);
}

对于上下文，有 15 行和 15 列大小均匀的 table 单元格，ID 类似于“a1”和“h14”。

然而，我遇到的问题是即使在反转 for 循环时，逆函数仍然会向上迭代，我不知道为什么：

function timeOutUp(k) {
  let bubbleRowNegative = col + rowArray[k];
  let bubbleRowNegativeId = document.getElementById(bubbleRowNegative);

  setTimeout(function() {
    bubbleRowNegativeId.style.backgroundColor = "#AA3333";
    console.log(`Index: ${k}, Row Num: ${rowArray[k]}`);
  },k * 50);
}

for (let k=row-2; k>=0; k--) {
  timeOutUp(k);
  console.log(k);
}

我开始时使用相同的函数来处理两个 for 循环，但没有用，所以我尝试使用 2 个单独的函数来使用此方法。

有没有更简单的方法来解决这个问题？

Answer 1

即使您的 for 循环反转了，它仍然会为每次迭代传递相同的索引，并且该索引用于计算它获得的延迟。因此无论如何，索引 0 处的项目都会延迟 0*50 毫秒，无论它是先发生还是最后发生。您仍然需要您的原始计数器来定义它们的有序索引。你可以这样解决：

function timeOutUp(k, i) {
  let bubbleRowNegative = col + rowArray[k];
  let bubbleRowNegativeId = document.getElementById(bubbleRowNegative);

  setTimeout(function() {
    bubbleRowNegativeId.style.backgroundColor = "#AA3333";
    console.log(`Index: ${k}, Row Num: ${rowArray[k]}`);
  },i * 50);
}

for (let k=row-2, i = 0; k>=0; k--, i++ ) {
  timeOutUp(k, i);
  console.log(k, i);
}

我刚刚添加了 1 个变量：i 回来了，算起来了。它被传递给 timeOutUp 以按照您想要的顺序计算实际延迟。

如何使用向后迭代的 settimeout 设置 for 循环？

How can I set a for loop with settimeout that iterates backwards?

javascript

for-loop

settimeout