Javascript array.forEach（function）執行函數的次數是預期的兩倍

Question

我有一個帶有單個按鈕的html文件

<!DOCTYPE html>
<html>    <body>
<p>Click the button to list all the items in the array.</p>

<button onclick = "numbers.forEach(myFunction)" >Try it</button>

<p id="demo"></p>
</body>     
</html>

我也有一個Javascript文件，其中包含.forEach方法的onclick函數。
單擊按鈕后，我要遍歷數組，遍歷數組中元素的每個實例。

對於此數組中的每個元素，我想在以后使用計時器輸出其索引和值，該計時器等待一秒鍾以顯示下一個排列。

demoP = document.getElementById("demo");
var numbers = [];

var random = Math.floor(Math.random() * 4) + 1;

numbers.push(random);

function myFunction(item, index) {
  random = Math.floor(Math.random() * 4) + 1;
  numbers.push(random);
  demoP.innerHTML = demoP.innerHTML + "numbers[" + index + "]: " + item + "<br>"; 
  //demoP.innerHTML = demoP.innerHTML + "<br>" //add magic spacing between permutation
  sleep(100);
  //switch to this and see how slow?
  //sleep(1000);
}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

我希望用戶單擊按鈕時顯示的結果是：

numbers[0] = 4
//waits a second and adds a <br> here to separate
numbers[0] = 4
numbers[1] = 2
//waits a second and adds a <br> here
numbers[0] = 4
numbers[1] = 2
numbers[2] = 3

等等。

當前，代碼輸出的元素至少是其兩倍，並且sleep（）似乎比應該保留的時間更長。

Answer 1

除了可怕的sleep功能。 您將myFunction用作forEach的回調，並在myFunction ，將新元素推入numbers ，該numbers與您在其上調用forEach數組相同。

forEach仍將循環數組時，不會在新推送的項目上調用回調。 但是到循環結束時，數組中的項將增加一倍。 根據MDN：

由forEach()處理的元素范圍是在第一次調用callback之前設置的。 在開始調用forEach()之后追加到數組的元素將不會由callback進行訪問。

如果數組包含N元素，則在單擊時將顯示N元素，而myFunction將推入其他N個元素，而在下次單擊時，這次將顯示2N元素，...

因此，每次單擊后，數組中的元素將加倍。

Javascript array.forEach（function）執行函數的次數是預期的兩倍

問題描述

1 個解決方案

解決方案1
4 已采納 2017-12-08 23:14:35

Javascript array.forEach（function）執行函數的次數是預期的兩倍

問題描述

1 個解決方案

解決方案1 4 已采納 2017-12-08 23:14:35

解決方案1
4 已采納 2017-12-08 23:14:35