Javascript 如何淡入动态<；李>；元素一个接一个？

我有一个函数，可以在循环数组的页面上显示我的数据。我一次只能显示一个li元素，当前代码将元素显示为一个块

function displayData() { 
const allLi = document.querySelector('article > ul');
allLi.innerHTML = '';

 pageSnippits.forEach(function(page) {
     const searchUlOut = document.querySelector('article > ul');
     const searchLiOut = document.createElement('li');
     searchLiOut.innerHTML = '<h3>' + page.title + '</h3>' + '<p>' + page.extract + '</p>';
     searchUlOut.appendChild(searchLiOut);
     setTimeout(function() {
         searchLiOut.classList.add('animated', 'fadeInUp');
     }, 10);
});

函数displayData（）{
const allLi=document.querySelector（'article>ul'）；
allLi.innerHTML=''；
pageSnippits.forEach（函数（第页）{
const searchUlOut=document.querySelector（'article>ul'）；
const searchLiOut=document.createElement（'li'）；
searchLiOut.innerHTML=''+page.title+'+''+page.extract+'
'；
searchUlOut.appendChild（searchLiOut）；
setTimeout（函数（）{
searchLiOut.classList.add（'animated'，'fadeInUp'）；
}, 10);
});

}

---

谢谢

这里的问题是，您将它们设置为在完成循环后10秒内全部出现。我建议在循环中添加一个递增的计数变量，然后：

setTimeout(function() {
    searchLiOut.classList.add('animated', 'fadeInUp');
}, 10000 * count);

---

或者类似的东西。

首先，

setInterval

以毫秒为单位。10毫秒对于正常可见的视觉效果来说太短了

基本上，问题是当您使用forEach在数组中循环时，每次代码遇到

setInterval

，它都会设置计时器并继续执行代码。循环在第一个计时器和所有设置的计时器同时启动之前完成。有很多链接讨论Javascript定时器是如何工作的。例如，见

我的解决方案是使用

setInterval

而不是

setTimeOut

。我创建了一个代码片段来给你一些想法。看看它是否有助于解决你的问题

函数displayData（）{
var pageSnippits=['javascript'，'is'，'da'，'best']；
var指数=0；
var handle=setInterval（函数（）{
var searchUlOut=document.querySelector（'article>ul'）；
var searchLiOut=document.createElement（'li'）；
searchLiOut.innerHTML=''+pageSnippits[index]+'+''+pageSnippits[index]+'
'；
searchLiOut.classList.add（'w3-animate-opacity'）；
searchUlOut.appendChild（searchLiOut）；
索引++；
如果（索引>=pageSnippits.length）清除间隔（句柄）；
}, 1000);
}
displayData（）

单击！

---

下载wow.js和animated.css

这对OP有什么帮助？添加js css您的项目添加li tag wow js属性可以工作除了10 in setTimeout不会等待10秒之外（），这无论如何也不会解决OP的问题。