使用setInterval错误地更新了innerHTML
使用setInterval错误地更新了innerHTML
提问于 2018-07-02 07:02:02
我正在尝试用纯js创建一个基本的打字机。
我基本上是在模仿某人用键盘以一种可信的方式打字。问题是，由于某些原因，我的节点的文本似乎不能显示，我似乎找不出原因
function get_random_in_interval(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function typewriter(textinput){
var min = 1;
var max = 3;
var rand = get_random_in_interval(min, max);
var into = document.getElementById('textentry');
for (i = 0; i < textinput.length; i++){
var timer = setInterval(function(){
if (i >= textinput.length){
clearInterval(timer);
}
into.innerHTML += textinput.charAt(i);
}, rand * 1000);
}
}
var test = "Hello, I am a <b>text</b> \n \n I tried doing some freaky stuff";
typewriter(test);#textentry {
border: 10px solid #2c3e50;
width: 400px;
height: 100px;
background-color: #95a5a6;
font-family: Consolas, monospace;
color: #FFF;
}<div id="textentry"></div>
我最好的猜测是我在这里错误地使用了setInterval()函数。问题是，我真的想不出还能把它放在哪里。如果我将setInterval()放在for()循环之外，那么它就可以工作(我自己测试它)，但它将以随机的间隔打印整个字符串，而不仅仅是所需的字符。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-02 07:10:03
这里有一个更简单的解决方案(与另一个方案相比)：
这基本上是使用一个setInterval，然后在i长度超过长度时停止。
function get_random_in_interval(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function typewriter(textinput){
var min = 1;
var max = 3;
var rand = get_random_in_interval(min, max);
var into = document.getElementById('textentry');
var i = 0;
let Htmlstring = ""; // Credit to Certain Performance for the idea
var timer = setInterval(function(){
Htmlstring += textinput.charAt(i);
into.innerHTML = Htmlstring;
i++;
if (i > textinput.length) {
clearInterval(timer);
}
}, get_random_in_interval(min, max)*30);
}
var test = "Hello, I am a <b>text</b> \n \nI tried doing some freaky stuff";
typewriter(test);#textentry {
border: 10px solid #2c3e50;
width: 400px;
height: 100px;
background-color: #95a5a6;
font-family: Consolas, monospace;
color: #FFF;
}<pre id="textentry"></pre>
Stack Overflow用户
发布于 2018-07-02 07:30:34
这里有一些很好的答案。我将此作为另一种选择发布，因为有很多方法可以做到这一点。您可以通过一个小的递归函数使用setTimeout而不是setInterval。
function get_random_in_interval(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function typewriter(textinput){
const min = 60;
const max = 120;
const into = document.getElementById('textentry');
const type = (i) => {
let rand = get_random_in_interval(min, max);
setTimeout(() => {
into.innerHTML = textinput.slice(0,i++)
if (i < textinput.length) type(i)
}, rand)
}
type(0)
}
var test = "Hello, I am a <b>text</b> \n \n I tried doing some freaky stuff";
typewriter(test);#textentry {
border: 10px solid #2c3e50;
width: 400px;
height: 100px;
background-color: #95a5a6;
font-family: Consolas, monospace;
color: #FFF;
}<div id="textentry"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51127586
复制相关文章
相似问题
腾讯云开发者
