使用数组 foreach() 创建元素 使用忙等待函数代替setTimeout

如何解决使用数组 foreach() 创建元素 使用忙等待函数代替setTimeout

var grid = document.getElementById("grid");
const calendar = [
  1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,];
calendar.forEach(myFunction);
function myFunction(value) {
  let div = document.createElement("div");
  div.classList.add("grid-item");
  div.innerHTML = value;
  grid.appendChild(div);
}

这是我的代码。我想为所有数组项每 500 毫秒创建一个“div”元素。 我该怎么做呢。 我试过“setTimeout”，但它不起作用。

解决方法

你能试试这个代码吗？

var grid = document.getElementById("grid");
const calendar = [
    1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,];

function appendChildInGrid(index) {
    console.log(calendar[index]);
    if (index < calendar.length) {
        setTimeout(function () {
            let value = calendar[index];
            let div = document.createElement("div");
            div.classList.add("grid-item");
            div.innerHTML = value;
            grid.appendChild(div);

            index++;
            appendChildInGrid(i);
        },500);
    }
}

appendChildInGrid(0);

,

使用忙等待函数代替setTimeout

const wait = (milliseconds) => {
  var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

wait(2000)