Question

我有一个在页面上显示数据的函数，它循环遍历一个数组。我试图一次显示一个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);
});

}

谢谢！

Answer 1

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

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

或类似的东西。

Answer 2

首先，setInterval需要时间，以毫秒为单位。 10毫秒太短，视觉效果通常不可见。

基本上问题是当你使用forEach循环遍历数组时，每次代码遇到setInterval时，它都会设置计时器并继续执行代码。即使第一个计时器触发，所有设定的计时器同时点火，循环也会结束。有许多链接讨论Javascript计时器如何工作。例如，请参阅here。

我的解决方案是使用setInterval代替setTimeOut。我已经创建了一个代码片段来为您提供一些想法。看看它是否有助于解决您的问题。

＆＃13;

function displayData() { 

var pageSnippits =['javascript','is','da','best'];


var index=0;
var handle = setInterval(function() {
        var searchUlOut = document.querySelector('article > ul');
        var searchLiOut = document.createElement('li');
        
         searchLiOut.innerHTML = '<h3>' + pageSnippits[index] + '</h3>' + '<p>' + pageSnippits[index] + '</p>';
         searchLiOut.classList.add('w3-animate-opacity');
         searchUlOut.appendChild(searchLiOut);
         
         index++;
         if(index>=pageSnippits.length) clearInterval(handle);
     }, 1000);
}

displayData()

＆＃13;

<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<article>
    <ul>
    </ul>
    </article>

＆＃13;

Answer 3

点击here！下载wow.js和animated.css

如何逐个淡入动态<li>元素？

3 个答案: