在 javascript 中的 forEach 循環的每次迭代中更改顏色？

Question

我有一個 function 可以短暫更改元素的顏色，然后將其更改回原始顏色。 根據您所處的級別（這是一個益智游戲），forEach 循環然后運行此 function 一定次數（在更高級別更多）。 目前，元素更改為的顏色是我手動輸入到代碼中的任何顏色。 每次 forEach 運行 function 時，我都試圖找到一種方法來更改該顏色。

例如，假設你在第一輪，forEach 運行了 3 次，元素將為 flash red-white, red-white, red-white。 我需要的是 flash 紅白、藍白、粉白。 當顏色用完時，它還需要循環回到數組的開頭。 例如，在更高級別，forEach 可能會運行 6 次，因此對顏色數組的迭代將不得不 go 回到開始一次。 這是代碼：

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 function 每次都將 x 歸零，所以它在第一次迭代時卡住了。 但我不確定我應該將這些變量放在哪里以使其正確迭代。 另外，我什至還沒有開始考慮將陣列強制轉換為 go 回到開頭。

有任何想法嗎？ 謝謝！

Answer 1

問題是您正在覆蓋x並且您正在嘗試修改正在傳入的數字j 。

首先， forEach 的定義有助於閱讀。

具體來說，在您傳入的 function 中， showCircle ， item是數組的當前項， j是循環的當前索引， x是原始數組，在這種情況下它將是initArray 。 然后，你用let x = 0覆蓋x ，並且你試圖增加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 colors：

0 % colors.length = 0
1 % colors.length = 1
2 % colors.length = 2
3 % colors.length = 0
4 % colors.length = 1
etc..

Answer 2

我會這樣做：

• 為了避免每次調用 function 時都會執行x=0 ，我們將把它放在它之外。

• 要遍歷 colors 數組，我們將利用模運算符：

   `x = (x+1)%3`

  這代替x++將一遍又一遍地獲得值0, 1, 2 。

• array.forEach()將多次調用 function 而無需等待完整的 flash（從白色到紅色再到白色）完成。 我們將使用遞歸。 完成完整的 flash 后，如果需要，我們將再次調用 function。

您可以在代碼段中看到一個工作示例：

 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();

現在你可以只放你的代碼而不是我的控制台日志，你應該讓它工作