首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用setInterval错误地更新了innerHTML

使用setInterval错误地更新了innerHTML
EN

Stack Overflow用户
提问于 2018-07-02 07:02:02
回答 2查看 58关注 0票数 2

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

我基本上是在模仿某人用键盘以一种可信的方式打字。问题是,由于某些原因,我的节点的文本似乎不能显示,我似乎找不出原因

代码语言:javascript
复制
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);
代码语言:javascript
复制
#textentry {
  border: 10px solid #2c3e50;
  width: 400px;
  height: 100px;
  background-color: #95a5a6;
  font-family: Consolas, monospace;
  color: #FFF;
}
代码语言:javascript
复制
<div id="textentry"></div>

我最好的猜测是我在这里错误地使用了setInterval()函数。问题是,我真的想不出还能把它放在哪里。如果我将setInterval()放在for()循环之外,那么它就可以工作(我自己测试它),但它将以随机的间隔打印整个字符串,而不仅仅是所需的字符。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-02 07:10:03

这里有一个更简单的解决方案(与另一个方案相比):

这基本上是使用一个setInterval,然后在i长度超过长度时停止。

代码语言:javascript
复制
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);
代码语言:javascript
复制
#textentry {
  border: 10px solid #2c3e50;
  width: 400px;
  height: 100px;
  background-color: #95a5a6;
  font-family: Consolas, monospace;
  color: #FFF;
}
代码语言:javascript
复制
<pre id="textentry"></pre>

票数 2
EN

Stack Overflow用户

发布于 2018-07-02 07:30:34

这里有一些很好的答案。我将此作为另一种选择发布,因为有很多方法可以做到这一点。您可以通过一个小的递归函数使用setTimeout而不是setInterval

代码语言:javascript
复制
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);
代码语言:javascript
复制
#textentry {
  border: 10px solid #2c3e50;
  width: 400px;
  height: 100px;
  background-color: #95a5a6;
  font-family: Consolas, monospace;
  color: #FFF;
}
代码语言:javascript
复制
<div id="textentry"></div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51127586

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档