Javascript 打字机片段使浏览器没有响应

Question

我有一种方法可以使用Javascript为我的文本添加打字机效果。我使用以下代码片段来执行此操作:

const text = document.querySelector('.type')

const content = text.textContent
let counter = 0
text.textContent = ''
while (counter < content.length) {
    setTimeout(function () {
        text.textContent += content[counter];
        counter += 1
    }, 1000)
}

我知道这种方法看起来很荒谬，但我很好奇为什么要这样做。 当我尝试运行此代码片段时，浏览器 (Chrome) 没有响应。 我想知道这段代码是否会产生无限循环，为什么？如果有人可以为我提供一些替代方法来获得想要的结果。

Answer 1

因为setTimeout中的counter和外面的counter不一样。如果您在一段时间后执行控制台登录计数器，它仍然是 0。

这与作用域有关，这里解释起来有点太多，但这就是您正在寻找的。简单的解释是，现在在 setTimeout() 中应用的 function(){} 内部，该函数外部的变量不存在。

因为它不是同一个变量，所以外部的变量永远不会更新，因此您的循环永远不会停止添加更多超时，因此您的浏览器永远不会停止。

---

除此之外，在您当前的代码中，所有字符将在 1000 毫秒后同时出现。 setTimeout 不会使“等待”时间为 1000 毫秒，它只是告诉 javascript“在 1000 秒后执行此操作”，然后继续。您创建类似队列的东西，告诉它们所有人在 1000 毫秒后执行该任务。

这两个问题的解决方案(但请仔细阅读范围!)，就是利用这些知识来为您带来优势:

while (counter < content.length) {
    setTimeout(function () {
        text.textContent += content[counter];
    }, 1000 * counter++)
}

现在我们再次将它们放入“队列”中，但这一次我们告诉接下来的每个人再等待 1000 毫秒。