我如何擺脫數組中的未定義？

Question

我是一個自學成才的編程新手，我正在嘗試使用 arrays、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>

Answer 1

您可以重新組織它，以便每個 function 調用都建立下一個 function 調用。 這樣您就不必擔心跟蹤要清除的間隔，並且更容易理解 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);

} 我的函數（0）；

Answer 2

您可能會發現setTimeout更易於管理。 這里我們用數組調用一個function，初始化索引，然后調用一個內部的function。

這記錄了數組的每個單詞。 我們增加索引，然后，如果索引小於數組長度，我們再次調用loop function。

 // 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>

附加文件

• 模板/字符串文字

Answer 3

我認為問題是你使用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(); 

Answer 4

堅持使用當前的setInterval()方法，您可以執行類似的操作。

這種方法消除了對循環的需要。 因為setInterval()重復調用 function，它正在處理這個問題。

// 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);
  }
}