Javascript 为什么不是'；这不是'；查拉特'；功能正常吗？

我试图用Vanilla JS创建一个打字效果，但由于某种原因，

charAt

函数不起作用，当我用类似于0的东西替换

I

时，它起作用了，但即使它被包装在一个

setTimeout（）函数中，它也能一下子把所有的东西都吐出来


var-statement=document.getElementsByClassName（'statement'）[0]；
var words=[‘网站’、‘应用’、‘游戏’]；
无功转速=100；
功能类型（word）{
for（变量i=0；i
*{
字体系列：Arial；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.光标{
背景：#000；
宽度：2倍；
高度：15px；
动画：闪烁1s步数（5，开始）无限；
}
@关键帧闪烁{
到{可见性：隐藏；}
}

我们制造
我敢肯定，在超时时切换此代码块将解决您的问题。不过，我还没有能力亲自测试它

setTimeout(function(i) {
    sentence.innerHTML += word.charAt(i);
}.bind(this,i), speed * i);

您可能希望使用递归，以便每次向innerHtml添加新字母时，它都会启动一个新的超时。现在它正在同时创建所有的超时，所以它们基本上是同时启动的。
你应该提高速度，因为100非常低，你看不到它。“网站”仍在800毫秒内加载，因此很难看到任何内容

不要使用“type”作为函数名，因为这是一个保留的jquery函数

这就是它的工作原理：

var sentence = document.getElementsByClassName('sentence')[0];
var words = ['websites', 'apps', 'games'];
var speed = 100;

function typewriter_string(word) {
  sentence.textContent='';
  for(var i = 0; i < word.length; i++) {
      doSetTimeout(i, word);
  }
}

function doSetTimeout(i, word){
    setTimeout(function() {
      sentence.textContent += word.charAt(i);
    }, speed*i);
}

typewriter_string('websites');

var-statement=document.getElementsByClassName（'statement'）[0]；
var words=[‘网站’、‘应用’、‘游戏’]；
无功转速=100；
功能打字机\u字符串（word）{
句子.文本内容=''；
for（变量i=0；i

在代码中，由于for循环中的setTimeout，所以“i”始终为8。
使用使用递归的“异步”循环，因为现在一次启动所有计时器：


var-statement=document.getElementsByClassName（'statement'）[0]；
var words=[‘网站’、‘应用’、‘游戏’]；
无功转速=100；
功能类型（word）{
如果（！word.length）返回；//无需执行任何操作
setTimeout（函数（）{
句子.textContent+=word.charAt（0）；
键入（word.substr（1））；//现在才递归调用
}，速度）；
}
类型（字[0]）
*{
字体系列：Arial；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.光标{
背景：#000；
宽度：2倍；
高度：15px；
动画：闪烁1s步数（5，开始）无限；
}
@关键帧闪烁{
到{可见性：隐藏；}
}

我们制造
Related:-甚至可能在for循环中使用dupeUse
let i
而不是
var i
，并将
speed*i
而不是
speed
作为
setTimeout（）
的第二个参数。另请参见：这是可行的，但它仍然会一次性被吐出，因为您的速度总是一样的。所以你所有的超时都会立即触发。也许如果你能把速度乘以i，你就能增加每个后续超时的时间。我更新了我的答案，以反映
.bind
的作用是什么？我不使用jQuery。是的，但在每种语言中都应该避免使用名为“type”的方法。添加了一个工作示例。为什么会这样？但为什么会立即创建超时？我认为超时运行了，等待指定的时间，然后继续执行以下代码？@JordanBaron
setTimeout（）
启动一个计时器，一旦时间到了，它将运行指定的函数，但是其余的代码会一直运行，不会等待计时器完成。@JordanBaron代码首先循环并创建word.length数量的计时器。所有这些计时器都设置为在100毫秒内关闭。所以100毫秒后，它们几乎一次触发（它们都有轻微的偏移，因为循环的每次迭代只需要很短的时间）并添加它们的字母。接受它们是因为使用了递归，因为这是最短的代码量。不过有一个问题。为什么不一次创建所有超时？根据我从其他答案中了解到的情况，应该立即创建超时。在我的答案中，只有在前一个超时过期时才会创建超时。不同之处在于，超时参数始终是
speed
，而如果您同时创建它们，则需要为每个参数提供不同的值（通过乘法）。