与超时函数javascript斗争

我试图让这个循环在javascript中工作，这样它可以在不同的时间间隔打开和关闭手风琴。。。。它只运行一次循环并停止。我把头撞在墙上，为什么

var i;

i = 0;

while (i < 999) {
  setTimeout((function() {
    return $("#money-slide").collapse("show");
  }), 0);
  setTimeout((function() {
    return $("#money-slide").collapse("hide");
  }), 4000);
  setTimeout((function() {
    return $("#collaboration-slide").collapse("show");
  }), 4000);
  setTimeout((function() {
    return $("#collaboration-slide").collapse("hide");
 }), 8000);
  setTimeout((function() {
    return $("#efficiency-slide").collapse("show");
  }), 8000);
  setTimeout((function() {
    return $("#efficiency-slide").collapse("hide");
  }), 12000);
  setTimeout((function() {
    return $("#communication-slide").collapse("show");
  }), 12000);
  setTimeout((function() {
    return $("#communication-slide").collapse("hide");
  }), 16000);
  i++;
} 

vari；
i=0；
而（i<999）{
setTimeout（（函数（）{
返回美元（“#货币幻灯片”）。折叠（“显示”）；
}), 0);
setTimeout（（函数（）{
返回美元（“#货币幻灯片”）。折叠（“隐藏”）；
}), 4000);
setTimeout（（函数（）{
返回美元（“#协作幻灯片”）。折叠（“显示”）；
}), 4000);
setTimeout（（函数（）{
返回$（“#协作幻灯片”）。折叠（“隐藏”）；
}), 8000);
setTimeout（（函数（）{
返回美元（“#效率幻灯片”）。折叠（“显示”）；
}), 8000);
setTimeout（（函数（）{
返回美元（“#效率幻灯片”）。折叠（“隐藏”）；
}), 12000);
setTimeout（（函数（）{
返回美元（“#通讯幻灯片”）。折叠（“显示”）；
}), 12000);
setTimeout（（函数（）{
返回$（“#通信幻灯片”）。折叠（“隐藏”）；
}), 16000);
i++；
} 

使用

而不是

setTimeout

另外，

setTimeout

ot

setIterval

是异步的，因此从中返回任何内容都不会起任何作用

试试这个

var i = 0;

var timer1, timer2, timew3, timer4, timer5, timer6, timer7, timer8;

setAnimationIntervals();



i = 0;

function setAnimationIntervals() {
    timer1 = setInterval((function () {
        $("#money-slide").collapse("show");
    }), 0);
    timer2 = setInterval((function () {
        $("#money-slide").collapse("hide");
    }), 4000);
    timer3 = setInterval((function () {
        $("#collaboration-slide").collapse("show");
    }), 4000);
    timer4 = setInterval((function () {
        return $("#collaboration-slide").collapse("hide");
    }), 8000);
    timer5 = setInterval((function () {
        $("#efficiency-slide").collapse("show");
    }), 8000);
    timer6 = setInterval((function () {
        $("#efficiency-slide").collapse("hide");
    }), 12000);
    timer7 = setInterval((function () {
        $("#communication-slide").collapse("show");
    }), 12000);
    timer8 = setInterval((function () {
        $("#communication-slide").collapse("hide");
        i++;
        if (i === 999) {
            clearAnimationIntervals();
        }
    }), 16000);
}

function clearAnimationIntervals {
    clearInterval(timer1);
    clearInterval(timer2);
    clearInterval(timer3);
    clearInterval(timer4);
    clearInterval(timer5);
    clearInterval(timer6);
    clearInterval(timer7);
    clearInterval(timer8);
}

---

它之所以只执行一次，是因为您在一个循环中安排了如此多的超时，然后它们都同时运行，当每个超时都被执行时，它就停止了。您需要从超时回调创建另一个超时，或者使用

setInterval

大致如下（未测试）：

---

您可以一次设置所有999个超时，而不是在上一次超时结束时设置超时

---

您需要在超时功能中设置新的超时。或者最好使用setInterval

如果您将console.log（i）添加到循环中，您应该会看到它确实运行了多次。这是因为JavaScript不会在进入下一个事件之前等待超时完成。基本上，它在你的循环中运行999次，并同时设置所有超时。你可以把

i++

位于last timeout函数中，因此在触发超时之前它不会迭代。是的，我插入了一个console.log（I），并看到它在没有暂停的情况下运行超时。如何防止这种情况发生？@jasonmmiraglia，您不能将

I++

放在超时函数中以更改循环的迭代方式。使用

setInterval

将防止动画在999次之后结束。@jasonmmiraglia。。当然检查编辑的代码使用此代码，您将有

#货币幻灯片

折叠并打开4次，此时

#通信幻灯片

折叠并打开一次。我不认为OP会这么做。而且，

timer1

将持续发射。我不确定我是否理解它是如何工作的。。。你能举个例子吗？我已经编辑了我的答案。很抱歉，我不太擅长javascript，所以我不清楚你的建议。

var i = 0;

var timer1, timer2, timew3, timer4, timer5, timer6, timer7, timer8;

setAnimationIntervals();



i = 0;

function setAnimationIntervals() {
    timer1 = setInterval((function () {
        $("#money-slide").collapse("show");
    }), 0);
    timer2 = setInterval((function () {
        $("#money-slide").collapse("hide");
    }), 4000);
    timer3 = setInterval((function () {
        $("#collaboration-slide").collapse("show");
    }), 4000);
    timer4 = setInterval((function () {
        return $("#collaboration-slide").collapse("hide");
    }), 8000);
    timer5 = setInterval((function () {
        $("#efficiency-slide").collapse("show");
    }), 8000);
    timer6 = setInterval((function () {
        $("#efficiency-slide").collapse("hide");
    }), 12000);
    timer7 = setInterval((function () {
        $("#communication-slide").collapse("show");
    }), 12000);
    timer8 = setInterval((function () {
        $("#communication-slide").collapse("hide");
        i++;
        if (i === 999) {
            clearAnimationIntervals();
        }
    }), 16000);
}

function clearAnimationIntervals {
    clearInterval(timer1);
    clearInterval(timer2);
    clearInterval(timer3);
    clearInterval(timer4);
    clearInterval(timer5);
    clearInterval(timer6);
    clearInterval(timer7);
    clearInterval(timer8);
}

var money_slide_visible = false;
var money_slide_handler = function () {
    $("#money-slide").collapse(money_slide_visible ? 'hide' : 'show');
    money_slide_visible = !money_slide_visible;
    setInterval(money_slide_handler, 4000);
};

money_slide_handler();