如何将这个函数变成干函数?
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
您可以对
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>
Nina Scholz
2019-01-24