我如何擺脫陣列中的未定義？

我是一個自學編程的新手，我正在嘗試使用陣列、DOM 和 setInterval() 方法。我撰寫了一個代碼來訪問我的 html 檔案的 h1 標記，并在該標記中以 1000 毫秒的間隔顯示陣列的每個元素。不幸的是，代碼運行成功，但在執行結束時顯示“未定義”。當我檢查 Chrome 開發工具的元素部分時，我意識到我的 h1 標記一直在閃爍，我認為這表明我的代碼即使在陣列中的所有元素都已消失后仍會繼續運行。我使用了過濾器方法 clearTimeout() 方法，仍然得到相同的結果。我將在下面粘貼我的代碼。希望我能解決我的問題。提前感謝反饋！

function myFunction() {
  const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"];

  for (let i = 0; i < welcome.length; i  ) {
    function subset() {
      document.getElementById("heading").innerHTML = welcome[i  ];
    }
    setInterval(subset, 1000);
    return;
  }
}
myFunction();

<h1 id="heading"></h1>

uj5u.com熱心網友回復：

您可以重新組織它，以便每個函式呼叫設定下一個函式呼叫。這樣您就不必擔心跟蹤要清除的間隔，并且更容易理解 i 是如何遞增的。如果您不清楚 function.bind() 的作業原理，我建議您閱讀一下，它非常有用。

function myFunction(i) {
const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"];
document.getElementById("heading").innerHTML = welcome[i];
if (i < welcome.length - 1)
    setTimeout(myFunction.bind(null, i   1), 1000);

} myFunction(0);

uj5u.com熱心網友回復：

您可能會發現setTimeout更易于管理。這里我們用陣列呼叫一個函式，初始化索引，然后呼叫一個內部函式。

這會記錄陣列的每個單詞。我們增加索引，然后，如果索引小于陣列長度，我們loop再次呼叫該函式。

// Declare your array, and cache your element
const welcome = ['Hello', 'My', 'Name', 'Is', 'Philip', 'Nice', 'To', 'Meet', 'You!'];
const heading = document.getElementById('heading');

function myFunction(arr) {

  // Initialise the index
  let index = 0;

  // `setTimeout` calls `loop` if the
  // index < than the array length
  function loop() {

    const el = arr[index];

    // Add the word to the heading
    // Depending on the index prefix a space to it
    const word = index ? ` ${el}`: el;
    heading.textContent  = word;

    // Increment the index
      index;

    // If the index < than the array length
    // call the `loop` function again
    if (index < arr.length) {
      setTimeout(loop, 1000);
    }
  
  }
  
  // Call `loop` for the first time
  loop();

}

// Call `myFunction` with the array
// as an argument
myFunction(welcome);

<h1 id="heading"></h1>

附加檔案

• 模板/字串文字

uj5u.com熱心網友回復：

堅持你目前的setInterval()方法，你可以做這樣的事情。

這種方法消除了回圈的需要。因為setInterval()在重復呼叫函式，所以它正在處理那個。

// set array
const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"];

// declare index tracking variable and set to 0
let i = 0;

// declare your setInterval function and assign to myInterval so you can clear later
const myInterval = setInterval(myTimer, 1000);

// declare the function that setInterval() will call to output the array to the document
function myTimer() {
  document.getElementById("heading").innerHTML = welcome[i];
  i  ;

  // clear interval when you've reached the end of the array
  if(i > welcome.length - 1) {
    clearInterval(myInterval);
  }
}

uj5u.com熱心網友回復：

我認為問題在于您使用setinterval的是每 1000 秒無休止地運行，除非您重置它或錯誤停止它 - 它不受您的回圈的約束。這與您所做的非常接近：

    let cnt = 0;
    const welcome = ["Hello", "My", "Name", "Is", "Philip", "Nice", "To", "Meet", "You!"];
    const headingTag = document.getElementById("heading");

    function headingLoop() {
        setTimeout(function() {
            headingTag.innerHTML = welcome[cnt];
            cnt  = 1;
            if (cnt < welcome.length) {
                headingLoop();
            }
        }, 1000);
    }

    headingLoop(); 

標籤：javascript 数组 循环 dom 设置间隔

上一篇：break陳述句會跳出多個回圈嗎？

下一篇：在具有多個條件的多個串列上應用if陳述句