javascript - 在循环末尾添加暂停

Question

下面的代码工作正常，直到我尝试在其中添加暂停。基本上，它会循环并看起来很正常，但几次之后它就会追上自己并导致很多奇怪的结果。我很好奇是否有更好的方法来实现我的目标。

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();

Answer 1

使用setTimeout而不是setInterval

setInterval 按时间间隔运行代码/函数，其间有超时长度，但它保持运行。另一方面，setTimeout 在指定时间结束时运行一次

这是一个片段，如果您将 setTimeout 更改回 setInterval，您会发现它也会变得疯狂

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>