需要在 JavaScript 中以 5 秒的时间间隔一个接一个地渲染 div

Question

我想在5秒的时间间隔内一个一个渲染这些div，当第二个渲染第一个时div需要隐藏，这需要循环过程，我试过了一些设定的间隔，但我无法实现这个请帮助我实现这个。

当前行为：

有这样直接打印的

<div id="popup-wrap">
<div id="1" class='popup-wrap'>div one</div>
<div id="2" class='popup-wrap'>div two</div>
</div>

请在下面找到我的代码：

const myObject = {
    "1": {
      "eventJson": "<div>div one</div>"
    },
    "2": {
      "eventJson": "<div>Div two</div>"
    }
  }
};

  Object.keys(myObject).map(function (key, index) {
      getRenderhtml(myObject[key], key);

});

const getRenderhtml = (jsonHtml, key) => {
    var popup = document.createElement("div");
    popup.setAttribute("id", key);
    popup.setAttribute("class", "Popup");
    const html = jsonHtml.eventJson;
    popup.innerHTML = html;
    document.getElementById("popup-wrap").appendChild(popup);
    const element = document.getElementById(key);
    element.style.visibility = "none";
    element.style.opacity = "1";
    element.style.display = "block";
    element.style.position = "fixed";
  //   element.style.top = "0px";
    element.style.left = "10px";
  //   element.style.right = "0px";
    element.style.bottom = "10px";
  };

提前致谢

Answer 1

这是执行此操作的一种方法。使用 setInterval 循环，找到当前显示的 div，隐藏它并继续下一个，当我们到达终点时重置为零。此示例设置为每秒循环一次以进行演示

const myObject = {
  "1": {
    "eventJson": "<div>div one</div>"
  },
  "2": {
    "eventJson": "<div>Div two</div>"
  }
}

// write the objects to the dom
document.querySelector('#popup-wrap').innerHTML = Object.entries(myObject)
    .map(e => e[1].eventJson.replace("<div>", `<div class='popup-wrap hidden' id='${e[0]}'>`))
    .join('');

// set up the rotate function
const rotateItem = () => {
  let currentIndex = -1,
    p = document.querySelectorAll('.popup-wrap')
  p.forEach((e, i) => {
    if (!e.classList.contains('hidden')) {
      currentIndex = i + 1;
      e.classList.add('hidden')
    }
  });
  currentIndex = Math.max(currentIndex, 0);
  if (currentIndex >= p.length) currentIndex = 0;
  p[currentIndex].classList.remove('hidden')
}
const interv = setInterval(rotateItem, 1000)

.popup-wrap {
  padding: 15px;
  background: #f0f0f0;
}

.popup-wrap.hidden {
  display: none;
}

<div id="popup-wrap"></div>

需要在 JavaScript 中以 5 秒的时间间隔一个接一个地渲染 div

Need to render div one by one in 5 sec time interval in JavaScript

html

javascript

jquery

settimeout

setinterval