如何为类的每个实例设置不同的间隔值答案

【问题标题】：How to set a different interval value for each instance of a class如何为类的每个实例设置不同的间隔值
【发布时间】：2020-12-30 16:36:52
【问题描述】：

我创建了一些简单的 CSS 翻转卡片，并使用 setInterval 让它们每 2 秒翻转一次。

    setInterval(function()
    {
        $('.flip-card').toggleClass('flip-card-flipped'); 
    }, 2000);

这很好，但每张卡片都会同时翻转，我想让它们一个接一个地翻转。所以我一直在尝试使用 .each 函数，但是当我使用 .each 时卡片根本不会翻转。

    $(".flip-card").each(function(i, obj) 
    {
        setInterval(function()
        {
            obj.toggleClass('flip-card-flipped');

        },(i * 1000) + 2000);
    });

在这个例子中，翻转动画需要一秒钟，所以上面的代码尝试获取类的索引并将其乘以 1000 以获得将间隔偏移的秒数。所以第一张牌会在 (0 * 1000) + 2000 之后翻转，下一张将是 (1 * 1000) + 2000 等等，即 2s、3s、4s....

【问题讨论】：

也请说明您的问题。我猜是你的时间间隔不对吧？
你的时间间隔似乎不是你想要的，因为所有卡片的时间间隔都应该是 2s。你想要的是一个偏移量，不是吗？
@ChristianFritz "我想让它们一个接一个地翻转。", "翻转动画需要一秒钟，所以上面的代码尝试获取类的索引并将其乘以 1000以秒为单位偏移间隔“。
我理解那部分。但是您还没有告诉我们到目前为止的代码有什么问题。你只是说“没有成功”。
好吧，我明白了，他们根本没有用 .each 代码翻转。

标签： javascript html jquery css setinterval

【解决方案1】：

阅读文档https://api.jquery.com/each/，我不清楚如何将obj 参数用于.each 函数。在他们的示例中，他们似乎建议改用this。

此外，您似乎想要一个偏移量，而不是增加后一张卡片的间隔。正如你所说，所有卡的间隔应该是2s。如果我理解正确，唯一的区别应该是他们何时开始翻转周期。如果是这样，那么您需要一个偏移量。

$(".flip-card").each(function(i) {
    setTimeout(() => 
        setInterval(() => $(this).toggleClass('flip-card-flipped'), 2000),
        i * 1000
    );
});

【讨论】：

行得通！修复它的是 this 而不是 obj，非常感谢。
顾名思义，element 是实际的 DOM 元素。所以你可以做$(element)。你可以在最后一个example看到这个