Question

我正在尝试用其他任何编码语言做一些非常容易的事情......我试图一次添加一个字符的数据，并且在浏览器中显示的每个字符之间有一点延迟。这是一个简单的脚本，我没有收到任何错误，但我没有得到任何结果。任何想法我可能做错了什么。 JavaScript对我来说还是一个新手。谢谢！

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

您的代码存在一些问题：

您创建一个新的<p>元素来保存字母，但绝不会将该元素附加到DOM。（您需要.appendChild(newP)将其添加到document.body或其他现有元素。）
您拨打setInterval()，然后在任何时间过后立即致电clearInterval()。没有任何反应。在任何情况下，在这样的循环中使用setInterval()是没有意义的 - 使用setTimeout()更有意义，Polygon只调度你传递它的函数的单次执行。 / p>
您正在每次writeIt()次迭代时立即调用while函数并将其返回值（undefined）传递给setInterval() ，而setInterval()需要一个函数 reference 。

这是一个工作版本：

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

注意我的代码中没有while循环。相反，我正在调用（嵌套）函数nextLetter()来处理index中的任何字母，然后递增index，然后我们还没有到达数组的末尾我正在使用setTimeout(nextLetter, 5000)安排nextLetter()在五秒钟后再次运行。请注意，nextLetter not 在作为参数传递给setTimeout()之后，其后面有括号 - 这是为了传递对函数的引用而不是调用函数。

此外，我在writeIt()函数中编写了代码，因为如果省略临时变量，它实际上只是一个单行代码。

Answer 2

有必要将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 个答案: