Javascript 在创建和插入的DOM元素中执行函数

我的意图很简单：我有一个

newSpan（）

函数，它创建一个新的

span

并将其插入

main

元素的第一个子元素之前（如果

main

为空，则将其追加），还有一个

lettyper（）

函数，它使用存储在

CONTENT

常量中的字符串填充插入的元素，同时生成一种向后键入的效果。其思想是创建一个新元素，然后在

window.onload

中使用一个循环在其中触发给定次数的效果

但是当我在

窗口中填充.onload

匿名函数时

window.onload = function() {
  newSpan();
  letterTyper();
  newSpan();
  letterTyper();
}

我在DOM中得到的结果是

<main>
  <span id="#span1">lorem ipsum</span>
  <span id="#span0"></span>
</main>

---

setTimeout

是异步的。当您第一次调用

letteryper

时，它将返回到您的

窗口。onload

并触发下一个

newSpan（）

和

letteryper（）

这意味着第一个跨距的

letteryper

循环会干扰第二个循环，因为第二个循环启动时第一个循环尚未完成。换句话说，不会创建第二个循环，但是

letteryper

的所有调用都会将

#span1

元素（第二个span元素）视为

main

的第一个子元素

在开始第二个循环之前，必须等待第一个循环完成。我建议你看看

我在您的代码中更改了一些内容，因此现在是：

const CONTENT='lorem ipsum'；
var main=document.querySelector（'main'）；
var spanId=0；
var charCount=CONTENT.length；
window.onload=函数（）{
//开始第一个循环
letterTyper（newSpan（））。然后（函数（）{
//第一个循环已完成，开始第二个循环
回信打字机（newSpan（））；
}).然后（函数（）{
//第二个循环已完成，开始第三个循环
回信打字机（newSpan（））；
});
}
函数newSpan（）{
var newSpan=document.createElement（'span'）；
var isEmpty=main.children.length==0；
newSpan.setAttribute（'id'，'#span'+spanId）；
如果（我是空的）{
梅因·阿佩奇尔德（newSpan）；
}否则{
main.insertBefore（newSpan，document.getElementById（'#span'+（spanId-1））；
}
spanId++；
charCount=CONTENT.length；//重置字符计数
返回新闻栏；
}
功能打字机（span）{
返回新承诺（功能（解决、拒绝）{
//执行一个勾号（添加一个字符并在100毫秒后调用自身）
var tick=函数（）{
//为一个新字符添加前缀
span.textContent=CONTENT[charCount-=1]+span.textContent；
如果（字符数>0）{
//100毫秒后再打勾
设置超时（勾选100）；
}否则{
//循环完成后，将调用“then”部分
解决（）；
}
};
//开始循环
设置超时（勾选100）；
});
}

---

window.onload只执行一次，也不要在那里放置任何循环。

const CONTENT = 'lorem ipsum';
var main = document.querySelector('main');
var spanId = 0;
var charCount = CONTENT.length;


window.onload = function() {
  newSpan();
  letterTyper();
  newSpan();
  letterTyper();
}

function newSpan() {
  var newSpan = document.createElement('span');
  var isEmpty = main.innerHTML === '';

  newSpan.setAttribute('id', '#span' + spanId);

  if (isEmpty) {
    main.appendChild(newSpan);
  } else {
    main.insertBefore(newSpan, document.getElementById('#span' + (spanId - 1)));
  }

  spanId++;
}

function letterTyper() {
  var targetSpan = main.firstChild;
  targetSpan.textContent = CONTENT.substring(charCount, charCount + 1) + targetSpan.textContent.substring(0, targetSpan.textContent.length);
  charCount--;

  if ( charCount < 0) {
      clearTimeout(timer);
      charCount = CONTENT.length;
  } else {
      timer = setTimeout('letterTyper()', 100);
  }
}