jquery - 使用 setInterval 延迟同时触发翻转事件

Question

现在这个可行了，我只是想让它的“flip”效果对于所有 4 个元素来说并不完全相同。有没有办法稍微延迟一下，或者最好的结果是在前一个翻转完成后立即进行？

flip() 是一个 jquery 插件，可将对象翻转 180 度并显示其“背面”。

这是我用来每 30 秒自动翻转一次的计时代码。

<script type="text/javascript">
    $(document).ready(function () {
        $("#activitiesCard, #callStatsCard, #agentsContactedCard, #agentsSalesCard").flip({
            trigger: 'manual'
        });


        $("#activitiesCard, #callStatsCard, #agentsContactedCard, #agentsSalesCard").each(function (i) {
            var el = $(this);
            setInterval(function () {
                el.flip('toggle');
            }, 30000);
        });

    });

</script>

这可行，但每张“卡片”都会在同一时间翻转。

JQuery 翻转:https://nnattawat.github.io/flip/

Answer 1

看起来翻转以恒定速度发生(默认为 500 毫秒)，因此计算变得简单:对于第 i 个元素，您只需在 处启动计时器即可>30 秒 + 500 * i。诀窍是将 setInterval() 包装在 setTimeout() 中，以便每个元素在开始三十秒间隔倒计时之前都有自己的固定延迟。

$(selector).each(function (i) {
  var el = $(this);
  setTimeout(function() {
    setInterval(function() {
      el.flip('toggle');
    }, 30000);
  }, 500 * i);
});