具有类型效应的多个元素JavaScript

我有两个元素使用javascript具有键入效果，每个元素都有自己的函数来实现键入效果，问题是两个文本显示不完整，但当我注释掉其中一个函数时，所有字符都会显示出来。这是我的index.js：

常量h1Txt='这是h1'； const headerP='这是段落！'； 设i=0； window.addEventListener'load'，函数{ console.log'typing'； 同步执行[打字机，打字机2]，100； }; 函数执行同步函数，超时{ 对于变量i=0；i

两个字符都使用相同的“i”，因此字符会丢失。 我对代码做了一些简化，下面是codepen中的一个工作示例：

window.addEventListener'load'，函数{ console.log'typing'； 同步执行[ 键入文本“h1-text”，“这是h1”， 键入text'p-text'，'这是段落！'， ], 100; }; 函数执行同步函数，超时{ 对于变量i=0；i{ element.innerHTML+=text.charAtidx； idx++； 如果idx==text.length{ 清晰间隔； } }, 100; }

---

两个字符都使用相同的“i”，因此字符会丢失。 我对代码做了一些简化，下面是codepen中的一个工作示例：

window.addEventListener'load'，函数{ console.log'typing'； 同步执行[ 键入文本“h1-text”，“这是h1”， 键入text'p-text'，'这是段落！'， ], 100; }; 函数执行同步函数，超时{ 对于变量i=0；i{ element.innerHTML+=text.charAtidx； idx++； 如果idx==text.length{ 清晰间隔； } }, 100; }

---

代码中的问题是，您引用的变量i与在两个打字机函数中在全局级别声明的变量i相同

当其中一个打字机函数执行时，i值将递增，因为两个打字机函数都引用同一个字符，所以输出中不会显示其中一个字符

例如

typeWriter1在函数执行结束时首先执行，i将为1。在输出中，它将在h1Txt文本中打印t。 现在考虑TyrWorkR2得到它的转弯和执行，现在这个函数也引用相同的i，它的值是1。所以，它不会在headerP文本中打印t。 因此，输出没有按预期显示

下面是解决此问题的方法之一，即使用打字机函数中引用的两个不同变量

常量h1Txt='这是h1'； const headerP='这是段落！'； 设i=0； 设j=0； window.addEventListener'load'，函数{ console.log'typing'； 同步执行[打字机，打字机2]，100； }; 函数执行同步函数，超时{ 对于变量i=0；i

代码中的问题是，您引用的变量i与在两个打字机函数中在全局级别声明的变量i相同

当其中一个打字机函数执行时，i值将递增，因为两个打字机函数都引用同一个字符，所以输出中不会显示其中一个字符

例如

typeWriter1在函数执行结束时首先执行，i将为1。在输出中，它将在h1Txt文本中打印t。 现在考虑TyrWorkR2得到它的转弯和执行，现在这个函数也引用相同的i，它的值是1。所以，它不会在headerP文本中打印t。 因此，输出为n ot将按预期显示

下面是解决此问题的方法之一，即使用打字机函数中引用的两个不同变量

常量h1Txt='这是h1'； const headerP='这是段落！'； 设i=0； 设j=0； window.addEventListener'load'，函数{ console.log'typing'； 同步执行[打字机，打字机2]，100； }; 函数执行同步函数，超时{ 对于变量i=0；i

两个函数具有相同的i全局变量会导致i获取意外值。您可以创建一个函数来控制键入，我将在type函数的作用域中：

常数h1Txt=这是h1； const headerP=这是段落！； window.addEventListenerload，函数{ 同步执行[ [h1Txt，h1文本，100]， [headerP，p-text，100] ]; }; 函数执行同步文本{ text.forEachargs=>type…args； } 函数类型文本、id、延迟{ const node=document.getElementById； 对于let i=0；i{ node.textContent+=text.charAti； }，i*延迟； } }

两个函数具有相同的i全局变量会导致i获取意外值。您可以创建一个函数来控制键入，我将在type函数的作用域中：

常数h1Txt=这是h1； const headerP=这是段落！； window.addEventListenerload，函数{ 同步执行[ [h1Txt，h1文本，100]， [headerP，p-text，100] ]; }; 函数执行同步文本{ text.forEachargs=>type…args； } 函数类型文本、id、延迟{ const node=document.getElementById； 对于let i=0；i{ node.textContent+=text.charAti； }，i*延迟； } }

---

两个函数都使用相同的全局i变量，您希望它如何工作？两个函数都使用相同的全局i变量，您希望它如何工作？thx man用于综合答案，simplicitythx man用于综合答案，以及简单性