javascript - 怎么把这个函数变成干函数呢？

Question

我正在尝试向我的页面添加打字机效果，它可以很好地处理预定义的数据，但我无法将其转换为接收值然后打印这些值的函数。

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

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

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" );

打印第一个字母，控制台打印此消息“错误” “类型错误:无法读取未定义的属性“长度” 在 typeWriter (xifoxoj.js:18:16)"

我的预期值是，传递到函数中的文本值将在带有传递到函数中的 id 的元素内完全打印，但只打印文本值的第一个字母。

Answer 1

使用 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>