Adding Pause at end of Loop

Question

The code below works fine, until I tried to add a pause into it. Basically, it will loop through and seem normal, but after a few times it sort of catches up to itself and causes a lot of strange reults. I was curious if there is a better way to achieve what I am going for.

var popups = $('.animate');
var i = 0;
var pT = 2000;
function animatePopup() {
 if (i >= popups.length){
 i = 0;
 }
 popups.eq(i).addClass("show")
 .delay(2000)
 .queue(function() {
 $(this).removeClass("show");
 $(this).dequeue();
 if (i == popups.length) {
 setInterval(animatePopup, pT);
 } else {
 animatePopup();
 }
 });
 i++;
}
animatePopup();

• ODelibalta: Your best bet is to use callbacks. However, it may look confusing. It sure was for me the first time around. Have you tried setTimeout in javascript ?
• yoavmatchulsky: setInterval runs every pT ms.. you probably meant setTimeout

Answer 1

Use setTimeout instead of setInterval

setInterval runs the code/function in intervals, with the length of the timeout between them, but it KEEPS RUNNING THEM. On the other hand setTimeout runs once at the end of the specified time

Here's a snippet, if you change setTimeout back to setInterval you'll see it goes crazy too

function recurrentDelayedFunction() {
 
 $('#out').append('ran<br>');
 
 setTimeout(recurrentDelayedFunction, 2000);
}
recurrentDelayedFunction();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=out></div>