使用 setTimeout 延迟向元素添加类？

Question

所以我有一堆 div 元素，我想添加一个类，所以它会触发一个转换——但我希望类一次添加 1 个，而不是同时添加，所以动画一次显示 1 个.

这就是我的 javascript 的样子。

var campaignInfo = document.querySelectorAll(".campaign-info-container");

setTimeout(function(){
    for(i=0; i<=campaignInfo.length;i++){
        campaignInfo[i].classList.add("campaign-container-slide");
        console.log(campaignInfo[i]);
    };  
}, 2000);

所以基本上我使用 querySelectorAll 来捕获该类的所有 div，当我 console.log() 它时会显示出来。

但不管添加类是否延迟。如果i 仅在循环内定义，我不确定如何将迭代添加到毫秒2000 * i。我尝试在setTimeout 之外创建一个var counter;，并在循环内使用counter++ 递增它，但延迟仍然不起作用。

另外，我收到此错误“无法读取未定义的属性类列表。

谢谢各位。哦，请不要使用 jQuery :)

编辑：

感谢您的解决方案！ :)

那么setInterval 在您的情况下是否像循环一样工作？

因为我希望每次单击按钮时都会出现此间隔，但在退出框架时会删除。所以我添加了以下内容以从元素中删除类。但我使用for 循环代替..

for(i=0; i<=campaignInfo.length; i++){ 
  campaignInfo[i].classList.remove("campaign-container-slide");
}

这可行，但我只是好奇我的第一个初始代码（不是上面的这个）为什么不起作用？为什么使用计数器有效但不能循环遍历它？

Answer 1

如果我理解正确，您可以使用嵌套的setTimeout 调用，或使用setInterval：

var campaignInfo = document.querySelectorAll(".campaign-info-container");
var index = 0; // The index of the next `campaignInfo` div to update
var interval = setInterval(function() { // Create a new interval that fires every 500ms
  campaignInfo[index++].classList.add("campaign-container-slide");
  if (index === campaignInfo.length) { // The last div has been reached, so...
    clearInterval(interval); // Clear the interval using the reference
  }
}, 500);

body { font-size: 2em;}
.campaign-info-container { background: #555; }
.campaign-container-slide { background: #eee; }

<div class="campaign-info-container">One</div>
<div class="campaign-info-container">Two</div>
<div class="campaign-info-container">Three</div>
<div class="campaign-info-container">Four</div>