更改 JavaScript 中 forEach 循环的每次迭代的颜色？

Question

我有一个函数可以短暂更改元素的颜色，然后将其更改回原始颜色。根据您所处的级别（这是一个益智游戏），forEach 循环会运行此函数一定次数（级别越高，次数越多）。目前，元素更改的颜色是我手动输入到代码中的颜色。我试图找到一种方法来在每次 forEach 运行该函数时更改该颜色。例如，假设您在第一轮，forEach 运行了三次，该元素将闪烁红白、红白、红白。我需要的是它闪烁红白、蓝白、粉白。当颜色用完时，它还需要循环回到数组的开头。例如，在较高级别，forEach 可能会运行 6 次，因此颜色数组上的迭代必须返回到开头一次。这是代码：function showCircle(item, j, x) {  setTimeout(function () {let x = 0;let colors = ['blue','pink','green']let color = colors[x];    var num = initArray[j];    var element = document.getElementById(num)    element.classList.add(`cell-glow-${color}`)    window.setTimeout(function () {      element.classList.remove(`cell-glow-${color}`)    }, 400);    j++;    x++    console.log(color)  }, speed() * j);};function showEachCircle(captureUserClicks) {  initArray.forEach(showCircle);  }显然，上面发生的情况是 showCircle 函数每次都会将 x 归零，因此它会卡在第一次迭代中。但我不确定应该将这些变量放在哪里以使其正确迭代。另外，我什至还没有开始思考如何强制数组回到开头。有任何想法吗？谢谢你！

Answer 1

问题是您正在覆盖并且您正在尝试修改传入的x数字。j

首先，forEach 的定义有助于阅读。

具体来说，在您传入的函数中，showCircle是item数组的当前项，j是循环的当前索引，x是原始数组，在本例中为initArray。然后，您用 覆盖x，let x = 0并尝试递增j，这不会执行任何操作，因为它在使用后会递增。

我认为您正在寻找更像这样的东西：

// Declare these outside the loop

var x = 0;

var colors = ['blue','pink','green'];

function showCircle(num, j) {

  // Save the current value so it isn't overwritten by the loop/setTimeout combination

  let y = x;

  // Increment x

  x++;

  setTimeout(function () {

    // Get the color, using the modulus operator (%) to start at the beginning again

    var color = colors[y % colors.length];

    // Get the element. num is the current item in the loop from initArray

    var element = document.getElementById(num);

    // Make it glow!

    element.classList.add(`cell-glow-${color}`)

    setTimeout(function () {

      // Make it not glow...

      element.classList.remove(`cell-glow-${color}`)

    }, 400);

    console.log(color);

    // j is the index of num in initArray

  }, speed() * j);

};

function showEachCircle(captureUserClicks) {

  initArray.forEach(showCircle);

}

如果您不熟悉模数（或余数）运算 %符，那么当您想要循环的内容有限时（在本例中），它对于循环非常有用colors。在此示例中，有 3 种颜色：

0 % colors.length = 0

1 % colors.length = 1

2 % colors.length = 2

3 % colors.length = 0

4 % colors.length = 1

etc..

Answer 2

我就是这样做的：

• 为了避免x=0每次调用函数时都被执行，我们将把它放在函数之外。

• 为了迭代颜色数组，我们将利用模运算符：

   `x = (x+1)%3`

  这将一次又一次地x++获取值。0, 1, 2

• array.forEach()将多次调用该函数，而无需等待完整的闪烁（从白色到红色，再回到白色）完成。我们将使用递归来代替。完整的闪存完成后，如果需要，我们将再次调用该函数。

您可以在代码片段中看到一个工作示例：

const initArray = [1,1,1,1,1,1];

const colors = ['red', 'green', 'blue'];

let x = 0;

let numberOfFlashes = 0;

function showCircle() {

  setTimeout(()=> {

    color = colors[x];

    console.log(color);

    setTimeout(()=> {

      console.log('white');

      numberOfFlashes++;

      if(numberOfFlashes<initArray.length){

        showCircle();

      }

    }, 400);

    x = (x+1)%3;

  }, 400);

}

showCircle();

现在你可以把你的代码代替我的控制台日志，你应该让它工作