时间戳

首页 > 解决方案 > Javascript打字机片段使浏览器没有响应

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

问题描述

我有一种方法可以使用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 ) 没有响应。我想知道这段代码是否会产生无限循环，为什么？如果有人可以为我提供一些替代方法来获得想要的结果。

标签： javascripthtmlgoogle-chromewhile-loopinfinite-loop

解决方案

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

这与范围有关，这里解释的有点太多了，但这就是您要寻找的。简单的解释是，在 a 内部function(){}，现在应用于 ，setTimeout()该函数外部的变量不存在。

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

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

这两个问题的解决方案（但一定要阅读范围！），是利用这些知识为您带来优势：

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

现在我们再次将它们放入那个“队列”，但这一次我们告诉每个下一个要再等 1000 毫秒。

推荐阅读