Javascript 使用setInterval错误地更新了innerHTML

我正在尝试用纯js创建一台基本的打字机

我基本上是在模仿某人用键盘以可信的方式打字。问题是，出于某种原因，我的节点的文本似乎并没有显示出来，我似乎不知道为什么

函数获取随机间隔（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
功能打字机（文本输入）{
var min=1；
var max=3；
var rand=在间隔内获取随机值（最小值、最大值）；
var into=document.getElementById（'textentry'）；
对于（i=0；i=textinput.length）{
清除间隔（计时器）；
}
into.innerHTML+=textinput.charAt（i）；
}，兰特*1000）；
}
}
var test=“你好，我是一个文本\n\n我试过做一些奇怪的事情”；
打字机（测试）
#文本输入{
边框：10px实心#2c3e50；
宽度：400px；
高度：100px；
背景色：#95a5a6；
字体系列：Consolas，monospace；
颜色：#FFF；
}
所有间隔都是同步设置的。当
打字机
功能结束时（在任何间隔运行之前），
i
等于
textinput.length
，因此
into.innerHTML+=textinput.charAt（i）不起作用

您还希望在每次迭代之前暂停—要做到这一点，最简单的方法可能是在循环中等待
a
Promise
。（您肯定不想要
setInterval
）


const get_random_in_interval=（min，max）=>(
新承诺（res=>setTimeout（res，Math.floor（Math.random（）*（max-min+1））+min））
);
异步功能打字机（文本输入）{
var最小值=5；
var max=45；
var into=document.getElementById（'textentry'）；
让htmlStr=''；
for（设i=0；i
我试着做一些奇怪的事情”；
打字机（测试）
#文本输入{
边框：10px实心#2c3e50；
宽度：400px；
高度：100px；
背景色：#95a5a6；
字体系列：Consolas，monospace；
颜色：#FFF；
}
与其他解决方案相比，这里有一个更简单的解决方案：

这基本上使用
setInterval
，然后在
i
超过长度后停止


函数获取随机间隔（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
功能打字机（文本输入）{
var min=1；
var max=3；
var rand=在间隔内获取随机值（最小值、最大值）；
var into=document.getElementById（'textentry'）；
var i=0；
让Htmlstring=“；//将此想法归功于某些性能
var timer=setInterval（函数（）{
Htmlstring+=textinput.charAt（i）；
into.innerHTML=Htmlstring；
i++；
如果（i>textinput.length）{
清除间隔（计时器）；
}
}，在间隔内获得随机值（最小值、最大值）*30；
}
var test=“你好，我是一个文本\n\n我试过做一些奇怪的事情”；
打字机（测试）
#文本输入{
边框：10px实心#2c3e50；
宽度：400px；
高度：100px；
背景色：#95a5a6；
字体系列：Consolas，monospace；
颜色：#FFF；
}
这里有一些很好的答案。我将此作为一个不同的选择发布，因为有很多方法可以做到这一点。通过一个小的递归函数，您可以使用
setTimeout
代替
setInterval


函数获取随机间隔（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
功能打字机（文本输入）{
常数min=60；
常数max=120；
const into=document.getElementById（'textentry'）；
常数类型=（i）=>{
设rand=get_random_in_interval（min，max）；
设置超时（（）=>{
into.innerHTML=textinput.slice（0，i++）
if（i
#文本输入{
边框：10px实心#2c3e50；
宽度：400px；
高度：100px；
背景色：#95a5a6；
字体系列：Consolas，monospace；
颜色：#FFF；
}
是否确实要为每个循环迭代设置新的间隔？此外，
i
在间隔函数中始终等于
textinput.length
。看。承诺FTW。。。虽然我很好奇，但是如果没有承诺，你会如何通过回调方式（
打字机（'text'，cb）
）解决这个问题。天哪，太棒了！我第一次看到像这样使用的
Promise
。明天我会努力研究它，看看我是否能更好地理解它，或者看看我对您的实现是否有任何疑问。到目前为止，我似乎有一些阅读工作要做，@RichardSzakacs要么使用递归（让最初的
打字机
调用另一个具有
设置超时
的函数并递归地调用自己）或者，通过提前计算所有增量并立即调用每个
setTimeout
，这将是一个简单的解决方法。@当然，性能非常好，你刚才给了我早上的咖啡编码练习。谢谢您只需计算
rand
一次-每次迭代将花费完全相同的时间。好主意，但可能需要更新它，以便
文本
工作：）