javascript - 在循环结束时添加暂停

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

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

最佳答案

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