James Wilson James Wilson - 3 months ago 13
jQuery Question

Delaying flip event from firing at the same time with setInterval

Right now this works, I'm just trying to make it so the '

flip
' effect isn't at the exact same time for all 4 elements. Is there a way to delay it by a little bit, or the best result would be to do it right after the previous one finishes flipping?

flip()
is a jquery plugin that flips an object 180 degrees and reveals the "back side" of it.

Here is the timing code I am using to automate the flip every 30 seconds.

<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>


This works, but each "card" is flipped at the exact same time.

JQuery Flip: https://nnattawat.github.io/flip/

Answer

It looks like the flip happens at a constant speed (by default, 500ms), so that makes the calculations simple: for the i-th element, you can just start the timer at 30 sec + 500 * i. The trick is to wrap the setInterval() in a setTimeout() so each element gets its own fixed delay before starting its thirty second interval countdown.

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