开发者问题收集

如何将这个函数变成干函数?

2019-01-24
70

我试图在我的页面中添加打字机效果,它可以很好地处理预定义数据,但我无法将其变成接收值然后打印这些值的函数。

我尝试通过添加参数并尝试打印传入的值来更改原始函数,但只打印了第一个字母。

<-- 这是原始函数。-->

let i = 0;
let txt = 'Hello world';
let speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("text").innerHTML += 
    txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

<-- 这是我将其更改为的内容。 -->

function typeWriter(id, text) {
  if (i < text.length) {
    document.getElementById(id).innerHTML += text.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}


typeWriter("text", "Hello world" );

第一个字母被打印出来,控制台打印出此消息“错误” “TypeError:无法读取未定义的属性‘length’在typeWriter(xifoxoj.js:18:16)”

我的预期值是,传递给函数的文本值将在传递给函数的id的元素内完整打印,但实际上只打印文本值的第一个字母。

2个回答

使用 String#split、Array#forEach。

注意:通过 speed * i 可提高速度

function typeWriter(id, text) {
  const speed = 500;
  const ele   = document.getElementById(id)
  text.split("").forEach((c,i)=>{
    setTimeout(()=>{
      ele.innerHTML += c;
    }, speed*i);
  });
}


typeWriter("text", "Hello world");
<div id="text"></div>
kemicofa ghost
2019-01-24

您可以对 idtext 进行闭包,并调用返回的函数进行第一次调用。然后,在超时之前进行任何其他需要的调用。

此方法缩短字符串并以空字符串结尾。

function typeWriter(id, text) {
    return function () {
        if (text) {
            document.getElementById(id).innerHTML += text[0];
            setTimeout(typeWriter(id, text.slice(1)), speed);
        }
    };
}

var speed = 50;

typeWriter("text", "Hello world")();
<span id="text"></span>
Nina Scholz
2019-01-24