JavaScript setInterval，createTextNode，appendChild不起作用？简单？

Question

I'm trying to do something which in any other coding language would be quite easy... I'm trying to add text from an array one character at a time with a small delay between each character being displayed in the browser. 我正在尝试做某种用任何其他编码语言都非常容易的事情……我试图一次从一个字符数组中添加文本，并且在浏览器中显示的每个字符之间的延迟很小。 It's a simple script and I'm not getting any errors but I'm not getting any results. 这是一个简单的脚本，没有任何错误，但是没有任何结果。 Any ideas what I might be doing wrong. 任何想法我可能做错了。 JavaScript is still pretty new to me. JavaScript对我来说还是很新的。 Thanks! 谢谢！

 <!doctype html> <html lang="en"> <body onload="timedText()"> <script> var arr = ["H", "E", "L", "L", "O"]; var newP = document.createElement("p"); function timedText() { var index = 0; while (index < arr.length) { var timerId = setInterval(writeIt(index), 5000); index++; clearInterval(timerId); }; }; function writeIt(i) { var newT = document.createTextNode(arr[i]); newP.appendChild(newT); }; </script> </body></html>

Answer 1

There are several problems with your code: 您的代码有几个问题：

You create a new <p> element to hold the letters, but never append that element to the DOM. 您创建了一个新的<p>元素来保存字母，但不要将该元素附加到DOM。 (You need .appendChild(newP) to add it to the document.body or to some other existing element.) （您需要.appendChild(newP)将其添加到document.body或其他现有元素中。）
You call setInterval() , but then call clearInterval() immediately afterwards, before any time has elapsed. 您可以调用setInterval() ，但是之后在任何时间过去之前立即调用clearInterval() 。 So nothing happens. 所以什么也没发生。 In any case it doesn't make sense to use setInterval() from within a loop like that - it would make more sense to use setTimeout() , which only schedules a single execution of the function you pass it. 无论如何，在这样的循环中使用setInterval()毫无意义-使用setTimeout()更有意义，因为setTimeout()仅调度传递给它的函数的单个执行。
You are calling the writeIt() function immediately on each while iteration and passing its return value ( undefined ) to setInterval() , whereas setInterval() expects a function reference . 您呼叫的writeIt()上的每个立即功能while迭代并通过其返回值（ undefined ）到setInterval()而setInterval()预计函数引用。

Here is a working version: 这是一个工作版本：

 var arr = ["H", "E", "L", "L", "O"]; var newP = document.createElement("p"); document.body.appendChild(newP); function timedText() { var index = 0; function nextLetter() { newP.appendChild(document.createTextNode(arr[index])); index++; if (index < arr.length) { setTimeout(nextLetter, 5000); } }; nextLetter(); }; timedText();

Notice I don't have a while loop in my code. 注意，我的代码中没有while循环。 Instead, I'm calling the (nested) function nextLetter() to handle whichever letter index is up to, then incrementing index , then if we haven't yet reached the end of the array I'm using setTimeout(nextLetter, 5000) to schedule nextLetter() to run again after five seconds. 相反，我要调用（嵌套的）函数nextLetter()来处理最多的字母index ，然后递增index ，然后如果我们尚未到达数组的末尾，则使用setTimeout(nextLetter, 5000)安排nextLetter()在五秒钟后再次运行。 Notice that nextLetter does not have parentheses after it when passed as a parameter to setTimeout() - that's to pass a reference to the function rather than calling the function. 请注意，在将nextLetter作为参数传递给setTimeout()时， nextLetter之后没有括号-它将传递对函数的引用，而不是调用函数。

Also I inlined the code from the writeIt() function, given that it was really just a one-liner anyway if you omit the temporary variable. 我还内联了writeIt()函数中的代码，因为如果忽略了临时变量，它实际上只是writeIt() 。

Answer 2

It is necessary to add newP to document.body . 有必要将newP添加到document.body 。

 <!doctype html> <html lang="en"> <body onload="timedText()"> <script> var arr = ["H", "E", "L", "L", "O"]; var newP = document.createElement("p"); // ADD START document.body.appendChild(newP); // ADD END function timedText() { var index = 0; while (index < arr.length) { var timerId = setInterval(writeIt(index), 5000); index++; clearInterval(timerId); }; }; function writeIt(i) { var newT = document.createTextNode(arr[i]); newP.appendChild(newT); }; </script> </body></html>

JavaScript setInterval，createTextNode，appendChild不起作用？简单？

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-05-16 03:09:01

解决方案2
0 2017-05-16 03:09:19

JavaScript setInterval，createTextNode，appendChild不起作用？ 简单？

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-05-16 03:09:01

解决方案2 0 2017-05-16 03:09:19

JavaScript setInterval，createTextNode，appendChild不起作用？简单？

解决方案1
3 已采纳 2017-05-16 03:09:01

解决方案2
0 2017-05-16 03:09:19