将类添加到对象1，等待，在for循环中将类添加到对象2

Posted 2023-01-16

我想通过一个类来获取元素的集合。然后，我希望遍历集合中的每个元素以添加一个类。

但是，我希望它向集合中的第一个添加一个类，然后等待5秒钟，然后再添加到集合中的第二个。依此类推...

<script type="text/javascript">
    window.onload = function()
        var boxs = document.getElementsByClassName("paragraph");

        for(let i = 0; i < boxs.length; i++)
            setTimeout(function () 
                boxs[i].classList.add("type");
            ,5000);
        
    
</script>

答案

您需要为此关闭，否则所有功能都将在i===boxs.length时执行。

for (let i = 0; i < boxs.length; i++) 
    ( num => setTimeout(function () 
        boxs[num].classList.add("type");
    , 5000*num))(i)

编辑

我刚刚注意到您使用了let，因此实际上您不需要闭包。每个循环都有自己的作用域。您可以只使用5000*i

另一答案

您可以使用i变量来计算setTimeout的适当延迟（5s后第一次执行，10s之后第二次执行，等等：]]

setTimeout
当您调用for(let i = 0; i < boxs.length; i++)
  setTimeout(function () 
    boxs[i].classList.add("type");
  , (i + 1) * 5000);

时，您只是在设置计时器以执行回调。因此，您需要为每个呼叫计算适当的延迟。

另一答案

所有设置的超时都在同一时间运行。循环运行并将每件事设置为5秒运行。您需要通过抵消每次迭代来增加延迟。