I am trying to create a flight widget

Question

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);

I want to append each child one by one. I meant by changing the speed of setTimeout. I tried doing it using for loop but it's not working as expected. please anyone help me?

Answer 1

You have to create immediately-invoked function expression (IIFE) to create a closure around 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);

 <div id="main_id" />

Answer 2

Seem you a bit misunderstanding about the eventloop and how setTimeout work. Your code will delay 5 function, each 1000ms and then run those at the same time. For more you can check out this link

I tried with setInterval instead, you can check it out to see if it fit your problem

 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);

 <div id="main_id" />

Answer 3

I found another solution, using setTimeout as you wish. Here what I changed is use for... of instead of forEach . forEach will not work with async function as I just discovered when I try to solve your question. Ref: 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);

 <div id="main_id" />