使用嵌套for循环的打字效果

Question

我知道有其他方法可以创建键入效果，但我似乎不明白使用嵌套for循环的逻辑。

var changingtext = document.querySelector(".text");
var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";

window.addEventListener("DOMContentLoaded", function(){
type();
});
function type(){
setTimeout(function(){
for(var i=0; i<arr.length; i++){
length = arr[i].length;
for(j=0; j<length;j++){
letter += arr[i].charAt(j);
changingtext.textContent = letter;
console.log(letter);
}
}
}, 200);

}

Answer 1

您应该在单个循环中调度超时，并增加等待的时间:

var changingtext = document.querySelector(".text");
var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";

window.addEventListener("DOMContentLoaded", function(){
type();
});
function type(){
let timeout = 200;
for(var i=0; i<arr.length; i++){
length = arr[i].length;
letter += ' ';
for(j=0; j<length * 2;j++){
if (j > length - 1) {
letter = letter.slice(0, -1)
} else {
letter += arr[i].charAt(j);
}
timeout += 200;
((timeout, letter) => {
setTimeout(() => {
changingtext.textContent = letter;
console.log(letter);
}, timeout);
})(timeout, letter);
}
}

}

<div class="text"/>

或者你的意思是这样?

var changingtext = document.querySelector(".text");
var arr = ["hard","Fun","a Journey","Career", "Countless hours"];
var length;
var index = 0;
var count=0;
var letter = "";
let currentText = "";

window.addEventListener("DOMContentLoaded", function(){
type();
});
function type(){
let timeout = 200;
for(var i=0; i<arr.length; i++){
length = arr[i].length;
letter = '';
for(j=0; j<length * 2;j++){
if (j > length - 1) {
letter = letter.slice(0, -1)
} else {
letter += arr[i].charAt(j);
}
timeout += 200;
((timeout, letter, restart) => {
setTimeout(() => {
changingtext.textContent = letter;
console.log(letter);
if (restart) type();
}, timeout);
})(timeout, letter, i === arr.length - 1 && j === (length * 2) - 1);
}
}

}

<div class="text"/>