我如何摆脱数组中的未定义？

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