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

将打印第一个字母，并且控制台将打印此消息“错误” “ TypeError：无法读取未定义的属性'length' 在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>

Answer 2

您可以对id和text进行闭包，并为第一次调用调用返回的函数。然后，在超时之前会进行任何其他需要的呼叫。

这种方法会缩短字符串并以空字符串结尾。

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>

如何将此功能转换为干功能？

2 个答案: