多个元素的类型效果JavaScript

Question

我有两个元素使用javascript打字效果，每个元素都有自己的功能，使打字效果，问题是两个文本显示不完整，但当我注释掉两个函数中的一个，所有的字符得到显示。这里是我的index。js:

const h1Txt = 'this is h1';
const headerP = 'this is paragraph!';
let i = 0;
window.addEventListener('load', function() {
console.log('typing');
executeAsynchronously([typeWriter, typeWriter2], 100);
});
function executeAsynchronously(functions, timeout) {
for (var i = 0; i < functions.length; i++) {
setTimeout(functions[i], timeout);
}
}
// The typewriter method for h1
function typeWriter() {
if (i < h1Txt.length) {
document.getElementById('h1-text').innerHTML += h1Txt.charAt(i);
i++;
setTimeout(typeWriter, 100);
}
}

// The typewriter method for p
function typeWriter2() {
if (i < headerP.length) {
document.getElementById('p-text').innerHTML += headerP.charAt(i);
i++;
setTimeout(typeWriter2, 100);
}
}

<h1 class="text-floating" id="h1-text"></h1>
<p id="p-text"></p>

Answer 1

您的代码中的问题是，您指的是在两个typeWriter函数中在全局级别声明的相同变量i。

当其中一个typeWriter函数被执行时，i值将被增加，并且由于两个typeWriter函数都引用同一个字符，因此在输出中没有显示该字符。

例如,

• typeWriter1在函数执行结束时首先执行i将是1。在输出中，它将在h1Txt文本中打印t。
• 现在考虑typeWriter2轮到它并执行，现在这个函数也引用了相同的i，其值为1。因此，它不会在headerP文本中打印t。

所以，输出没有按照预期显示。

下面是你可以解决这个问题的方法之一，即通过使用两个不同的变量，它们将在typeWriter函数中被引用。

const h1Txt = 'this is h1';
const headerP = 'this is paragraph!';
let i = 0;
let j = 0;
window.addEventListener('load', function() {
console.log('typing');
executeAsynchronously([typeWriter, typeWriter2], 100);
});
function executeAsynchronously(functions, timeout) {
for (var i = 0; i < functions.length; i++) {
setTimeout(functions[i], timeout);
}
}
// The typewriter method for h1
function typeWriter() {
if (i < h1Txt.length) {
document.getElementById('h1-text').innerHTML += h1Txt.charAt(i);
i++;
setTimeout(typeWriter, 100);
}
}
// The typewriter method for p
function typeWriter2() {
if (j < headerP.length) {
document.getElementById('p-text').innerHTML += headerP.charAt(j);
j++;
setTimeout(typeWriter2, 100);
}
}

<h1 class="text-floating" id="h1-text"></h1>
<p id="p-text"></p>

Answer 2

为两个函数使用相同的i全局变量会导致i取意外值。您可以创建一个函数来控制类型，并且i将在type函数的作用域中:

const h1Txt = "this is h1";
const headerP = "this is paragraph!";
window.addEventListener("load", function() {
executeAsynchronously([
[h1Txt, "h1-text", 100],
[headerP, "p-text", 100]
]);
});
function executeAsynchronously(texts) {
texts.forEach(args => type(...args));
}
function type(text, id, delay) {
const node = document.getElementById(id);
for (let i = 0; i < text.length; i++) {
setTimeout(() => {
node.textContent += text.charAt(i);
}, i * delay);
}
}

<h1 class="text-floating" id="h1-text"></h1>
<p id="p-text"></p>

Answer 3

您使用相同的'i'来表示两者，因此遗漏了字符。我对代码进行了一些简化，下面是codepen中的工作示例:

window.addEventListener('load', function() {
console.log('typing');
executeAsynchronously([
typeText('h1-text', 'this is h1'),
typeText('p-text', 'this is paragraph!'),
], 100);
});
function executeAsynchronously(functions, timeout) {
for (var i = 0; i < functions.length; i++) {
setTimeout(functions[i], timeout);
}
}
function typeText(elementId, text) {
let idx = 0;
const element = document.getElementById(elementId);
let interval;
interval = setInterval(() => {
element.innerHTML += text.charAt(idx);
idx++;
if (idx == text.length) {
clearInterval(interval);
}
}, 100);
}

<h1 class="text-floating" id="h1-text"></h1>
<p id="p-text"></p>