在js中循环，但等到当前迭代完成，然后进入下一个

Question

我的目标是执行一个可以打印数字 1-4 的函数；但是以 1s 为间隔（我不想使用 setInterval）。我一直在尝试，我能做的是在延迟一秒后打印数组中的所有元素。这是代码：

const wait = async (number) => {
  return new Promise(async(resolve)=>{
    setTimeout(async()=>{
      resolve();
    },number);
  })
}

const listElement = document.getElementById("list");

[1,2,3,4].map((num)=>{
  const newListItemElement = document.createElement("li");
  newListItemElement.innerHTML = num;
  wait(1000).then(()=>{
    console.log(num);
    listElement.appendChild(newListItemElement);
  })
})

<html>
<body>
  <h3>list</h3>
  <ul id="list">
  </ul>
</body>
</html>

我想要做的是稍等一下打印 1，然后等一下打印 2，依此类推。我在代码片段中添加的代码使所有数字同时出现，这是因为即使当前迭代尚未完成，地图功能也会继续。

Answer 1

您可以使用 setTimeout

const listElement = document.getElementById("list");

[1, 2, 3, 4].forEach((num) => {
  setTimeout(() => {
    const newListItemElement = document.createElement("li");
    newListItemElement.innerHTML = num;
    listElement.appendChild(newListItemElement);
  }, num * 1000);
})

const listElement2 = document.getElementById("list2");

// use this if you are looping over an array of data instead of array of numbers
[1, 2, 3, 4].forEach((num, index) => {
  setTimeout(() => {
    const newListItemElement = document.createElement("li");
    newListItemElement.innerHTML = num;
    listElement2.appendChild(newListItemElement);
  }, (index + 1) * 1000);
});

<body>
  <h3>list</h3>
  <ul id="list">
  </ul>
    <h3>list 2</h3>
  <ul id="list2">
  </ul>
</body>

在js中循环，但等到当前迭代完成，然后进入下一个

loop in js, but wait till current iteration is done, then get to next

javascript

asynchronous

es6-promise