我正在尝试创建一个飞行小部件答案

【问题标题】：I am trying to create a flight widget我正在尝试创建一个飞行小部件
【发布时间】：2022-11-12 04:41:33
【问题描述】：

let mainid = document.getElementById("main_id");

function createcards(txt) {
  let cards = document.createElement("div");
  cards.classList.add("ex-1");
  cards.textContent = txt;
  return cards;
}

function addElements(parent, children) {

    children.forEach((e) => {
      setTimeout(() => {
        parent.appendChild(e); 
      }, 1000);
 
    });
  
}

items = [
  createcards(1),
  createcards(2),
  createcards(3),
  createcards(4),
  createcards(5),
];

addElements(mainid, items);

我想一个一个地附加每个孩子。我的意思是改变 setTimeout 的速度。我尝试使用 for 循环来做，但它没有按预期工作。请有人帮助我吗？

【问题讨论】：

标签： javascript html css animation settimeout

【解决方案1】：

似乎您对事件循环以及 setTimeout 的工作方式有点误解。您的代码将延迟 5 个函数，每 1000 毫秒，然后同时运行这些函数。有关更多信息，您可以查看此link

我尝试使用 setInterval 代替，您可以检查一下它是否适合您的问题

let mainid = document.getElementById("main_id");

function createcards(txt) {
  let cards = document.createElement("div");
  cards.classList.add("ex-1");
  cards.textContent = txt;
  return cards;
}

function addElements(parent, children) {
  const interval = setInterval(item => {
    if (!children.length) {
      clearInterval(interval)
      return
    }
    parent.appendChild(children[0])
    children.shift()
  }, 1000)
}


items = [
  createcards(1),
  createcards(2),
  createcards(3),
  createcards(4),
  createcards(5),
];

addElements(mainid, items);

&lt;div id="main_id" /&gt;

【讨论】：

非常感谢谢谢?。这是我正在寻找的确切答案。它一一循环所有内容。你让我开心?。
哦，我肯定会的。
我想我必须了解更多关于事件循环和 setTimeout 的信息，除了这里之外，还有什么方法可以联系你以获得进一步的帮助。我的意思是任何社交媒体。
我想你可以加入 Discord Javascript Mastery（我刚刚找到），除了我之外会有更多人帮助

【解决方案2】：

您必须创建立即调用的函数表达式(IIFE) 来创建围绕setTimeout 的闭包。

let mainid = document.getElementById("main_id");

function createcards(txt) {
  let cards = document.createElement("div");
  cards.classList.add("ex-1");
  cards.textContent = txt;
  return cards;
}

function addElements(parent, children) {
    children.forEach((e, i) => {
      (function(index) {
        setTimeout(function() { parent.appendChild(e); }, i * 1000);
      })(i);
    });
}

items = [
  createcards(1),
  createcards(2),
  createcards(3),
  createcards(4),
  createcards(5),
];

addElements(mainid, items);

&lt;div id="main_id" /&gt;

【讨论】：

谢谢@Ahmad Faraz 花时间回答我的问题。非常感谢?。

【解决方案3】：

我找到了另一种解决方案，根据需要使用 setTimeout 。这里我改变的是使用for ... of 而不是forEach。 forEach 不适用于异步功能，正如我在尝试解决您的问题时发现的那样。参考：Using async/await with a forEach loop

let mainid = document.getElementById("main_id");

function createcards(txt) {
  let cards = document.createElement("div");
  cards.classList.add("ex-1");
  cards.textContent = txt;
  return cards;
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function addElements(parent, children) {
  for (let e of children) {        
    await sleep(1000);
    parent.appendChild(e); 
  }
}

items = [
  createcards(1),
  createcards(2),
  createcards(3),
  createcards(4),
  createcards(5),
];

addElements(mainid, items);

&lt;div id="main_id" /&gt;

【讨论】：

哇，它的作品令人惊叹，for 循环是非常酷的好作品。谢谢你?。