Question

我正在尝试让这个循环在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++;
}

Answer 1

使用

setInterval

而不是

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

Answer 2

之所以这样做是因为你在一个循环中安排了这么多的超时，然后它们全部同时运行，当每一个执行时，它就会停止。您需要从超时回调中创建另一个超时，或使用setInterval。

某些事情（未经测试）：

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

Answer 3

不是在上一次超时结束时设置超时，而是一次性设置所有999超时。

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

挣扎着超时功能javascript

3 个答案: