Javascript迭代字符串数组，并为每个字符串添加键入/删除效果，一个接一个地完成

我正在制作的组件用于键入并删除字符串列表。 目前，我具有键入/删除效果。但是，我无法使回路正确运行

理想的效果是键入+取消键入第一个字符串，然后是第二个字符串，然后是第三个字符串，以此类推

var pos=0
无功转速=50
var速度2=100
var str=document.getElementById（'str'）
变量i
变量消息=[
“网络安全”，
“脆弱性评估”，
“项目管理”，
“合规管理”
]
messages.forEach（函数（消息）{
函数类型（）{
console.log（'Type'+pos）
如果（位置<消息长度）{
str.innerText+=message.charAt（pos）
位置++
setTimeout（type，speed）//再次调用此fn以键入字母
}否则{
设置超时（擦除，速度2）
}
}
类型（类型、速度）
//擦除fn
函数擦除（）{
console.log（'Erase'+pos）
如果（位置>=0）{
var temp=消息子字符串（0，位置）
str.innerText=temp
位置--
设置超时（擦除，速度2）
}
}
})

创新解决方案

为了

这是填料含量。当站点的副本可用时，此区域中的文本将被替换。这是填料含量。当站点的副本可用时，此区域中的文本将被替换

当前，由于您的

消息。forEach

循环，您遇到的问题是同时启动所有键入和子顺序删除

不需要这个循环，因为您希望等待每个单词被键入并删除。因此，您需要记住当前邮件的索引，只要您键入并删除它，然后在删除最后一个单词后更新它

我更改了您的脚本，因此循环已被删除，目前只有一个操作，带有一个位标志，表示它

isRemoving

。就我个人而言，我宁愿使用

setInterval

来执行此操作，但为了不改变您想要的行为，我添加了

setTimeout

此版本将无限期运行，因为从数组中删除最后一个字后，它将返回到数组中的第一条消息

var速度=50；
var speed2=100；
var str=document.getElementById（'str'）；
var i=0；
var isRemoving=false；
变量消息=[
“网络安全”，
“脆弱性评估”，
“项目管理”，
“合规管理”
]
函数动作（）{
如果（正在删除）{
如果（str.innerText.length>0）{
str.innerText=str.innerText.substr（0，str.innerHTML.length-1）；
设置超时（动作，速度2）；
返回；
}
isRemoving=false；
i++；
如果（i>=messages.length）{
i=0；
}
设置超时（动作、速度）；
返回；
}
var message=消息[i]；
str.innerText=message.substr（0，str.innerHTML.length+1）；
if（str.innerText.length==message.length）{
isRemoving=真；
}
setTimeout（动作，isRemoving？速度2：速度）；
}
设置超时（动作、速度）

创新解决方案

为了

这是填料含量。当站点的副本可用时，此区域中的文本将被替换。这是填料含量。当站点的副本可用时，此区域中的文本将被替换

好吧，您可以同时开始所有的打字和擦除操作。我想说的是，您不需要
消息。forEach
块，只需检查
擦除方法是否存在数组中的下一个元素，如果是，则开始键入该元素。它只需要为您正在键入/擦除的当前元素保留一个索引，非常感谢您。在添加了一些细节之后，我用你的解决方案实现了我想要的效果。