更改 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 loopvar 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 = 01 % colors.length = 12 % colors.length = 23 % colors.length = 04 % colors.length = 1etc..

Answer 2

我就是这样做的：为了避免x=0每次调用函数时都被执行，我们将把它放在函数之外。为了迭代颜色数组，我们将利用模运算符：&nbsp;`x&nbsp;=&nbsp;(x+1)%3`这将一次又一次地x++获取值。0, 1, 2array.forEach()将多次调用该函数，而无需等待完整的闪烁（从白色到红色，再回到白色）完成。我们将使用递归来代替。完整的闪存完成后，如果需要，我们将再次调用该函数。您可以在代码片段中看到一个工作示例：const initArray = [1,1,1,1,1,1];const colors = ['red', 'green', 'blue'];let x = 0;let numberOfFlashes = 0;function showCircle() {&nbsp; setTimeout(()=> {&nbsp; &nbsp; color = colors[x];&nbsp; &nbsp; console.log(color);&nbsp; &nbsp; setTimeout(()=> {&nbsp; &nbsp; &nbsp; console.log('white');&nbsp; &nbsp; &nbsp; numberOfFlashes++;&nbsp; &nbsp; &nbsp; if(numberOfFlashes<initArray.length){&nbsp; &nbsp; &nbsp; &nbsp; showCircle();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 400);&nbsp; &nbsp; x = (x+1)%3;&nbsp; }, 400);}showCircle();现在你可以把你的代码代替我的控制台日志，你应该让它工作