如何设置一个带有向后迭代的 settimeout 的 for 循环？答案

【问题标题】：How can I set a for loop with settimeout that iterates backwards?如何设置一个带有向后迭代的 settimeout 的 for 循环？
【发布时间】：2022-01-10 14:15:17
【问题描述】：

我可能以完全错误的方式处理这个问题，因为我在 javascript 方面有点新手，但基本上我想要做的（为了一点乐趣）是拥有一个单元格的表格在点击时改变颜色，然后让北、东、南和西的单元格依次变为不同的颜色（想想炸弹人中的炸弹效果）。

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

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 列大小均匀的表格单元格，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 个单独的函数来使用此方法。

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

【问题讨论】：

因为你的延迟没有改变？它仍然适用于k*50 那里的每次超时迭代，所以第一个延迟 0，第二个延迟 50 等等......如果你反转你的循环，这不会改变，因为你传入了索引。您可能想要添加另一个计数器变量并像以前一样将其传递给计数。
延迟是造成“气泡”效果的原因，因此您单击的单元格变为红色 - 然后周围的单元格应该变成不同的颜色，远离单击的单元格。我发现“气泡”效果从被点击的单元格向下移动，但向上面那些被点击的单元格移动。延迟是产生连锁反应的唯一因素。
我不是说删除你的延迟，我是说你的反向循环对计算的延迟没有影响，因为它们是基于索引的，而不是基于顺序的。简而言之 k * 50 === i * 50，没有什么改变。
啊，我明白了，对不起。看来我将不得不采取完全不同的方法
只存储实际的呼叫顺序（我把它放在我的答案中）。基本上保留另一个变量来跟踪订单（i）和一个索引（k）。 i 向上计数，k 向下计数。

标签： javascript for-loop settimeout

【解决方案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，以按照您想要的顺序计算实际延迟。

【讨论】：

啊太棒了，这肯定能让向上的动作起作用，谢谢！