如何使用帶有 setTimeout() function 的循環來顯示名稱

Question

我試圖通過使用帶有setTimeout() function 的 for 循環在 3 秒后在 div 元素中顯示成員的名稱。 但是我得到了名稱數組的undefined值。 甚至var i的值也顯示為 4。我不知道為什么。 誰能向我解釋為什么以及如何解決這個問題。？

提前致謝！

JS代碼：

function members() {
  var arr = ["Joseph","John","Kumar","Shiva"];
  var i;
  for(i = 0; i < arr.length; i++) {
    setTimeout(function() {
      console.log("Member = " + i + ". " + arr[i]);
      document.getElementById("Names").innerHTML = "Member = " + i + ". " + arr[i];
    }, 3000);
  }
}
members();

<div id="Names"></div>

Answer 1

First, Because var is a function scope ( not block scope like for loop ), when the setTimeout execute after 3 sec, the loop will be ended and the value of i will be equal to the arr.length , and arr[arr.lenght ] 將等於undefined 。

為了解決這個問題，一種解決方案是使用let而不是var 。

其次，如果要將成員添加到HTML ，則需要使用+=與前面的string not =連接，這將重新初始化innerHTML

 const names = document.getElementById("Names"); function members() { var arr = ["Joseph","John","Kumar","Shiva"]; for(let i = 0; i < arr.length; i++) { setTimeout(function() { console.log("Member = " + i + ". " + arr[i]); document.getElementById("Names").innerHTML += `Member = ${(i + 1)}. ${arr[i]}<br />`; }, 3000); } } members();

 <div id="Names"></div>

Answer 2

我認為對您來說更好的解決方案是在 3 秒后執行 function，而不是將超時放入 for 循環中。

這就是導致您的問題的原因，因為var是一個 function 范圍變量。 因此，通過將 timeout 放在 for 循環中，最后一個元素將是未定義的，因為您的腳本會將最后一個元素讀取為arr.length ，即 4，而您沒有 arr[4]，因此它是未定義的。

此外，您的 innerHTML 編寫不正確，如果您想打印多個值，則需要使用innerHTML +=而不是innerHTML =因為innerHTML =將始終打印循環中的最后一個值，因為它會刪除您的元素的 innerHTML每次新的迭代。

我在下面修改了您的代碼片段。

https://codepen.io/Juka99/pen/VwxpXwL