1

我的问题出在一些 JavaScript 中：

            var mijnfunctie = function(){

    //balk 1 2 3

    setTimeout(function(){
        $("#balk1").animate({"margin-left": "0px"}, 400);
        $("#balk2").animate({"margin-left": "0px"}, 400);
        $("#balk3").animate({"margin-left": "0px"}, 400);
    });
    setTimeout(function(){
        $("#balk1").animate({"margin-left": "-2000px"}, 400);
        $("#balk2").animate({"margin-left": "4000px"}, 400);
        $("#balk3").animate({"margin-left": "-5000px"}, 400);
    }, 2000);

    //balk 4 5 6

    setTimeout(function(){
        $("#balk4").animate({"margin-left": "0"}, 400);
        $("#balk5").animate({"margin-left": "0"}, 400);
        $("#balk6").animate({"margin-left": "0"}, 400);
    }, 3000);

    setTimeout(function(){
        $("#balk4").animate({"margin-left": "2000px"}, 400);
        $("#balk5").animate({"margin-left": "-4000px"}, 400);
        $("#balk6").animate({"margin-left": "5000px"}, 400);
    }, 5000);


    setInterval(mijnfunctie, 6000);
};

mijnfunctie();

这是为滑块制作的，效果很好。六次，第六次之后就开始混了。所以在某个地方时间不对，但是在哪里呢？

4

3 回答 3

3

setInterval将排队一个重复的函数。由于您在排队的函数结束时执行此操作，因此在十二秒后，它将运行两次。每再过六秒，它们的数量就会翻倍。慢慢地，这将使浏览器屈服。您将在一分钟内设置 500 个计时器，第二分钟设置 500 000 个计时器......

要么移到setInterval要重复的函数之外，要么（更好地）将其更改为setTimeout（这将仅将一次调用排入队列）。

function mijnfunctie(){
   ...
   setTimeout(mijnfunctie, 6000);
}

其次，您的第一次调用setTimeout缺少它的论点。无论默认值是什么，您都应该始终指定它。

第三，如果任何动画延迟几秒钟，那么后续动画将立即运行。为了防止这种情况，您可能希望链接动画而不是依赖正确的时间。在这种情况下，为了防止金字塔效应（极端缩进），我建议这种形式：

function phase1(){
  $(...).animate(..., phase2);
}

function phase2(){
  ...

...

function phaseN(){
  $(...).animate(..., phase1);
}
于 2012-12-08T13:11:51.793 回答
2

您不能依赖 delay in setTimeout，该值仅表示函数的最小延迟。相反，您应该链接这些功能。

var mijnfunctie = function(){
    setTimeout(function(){
        $("#balk1").animate({"margin-left": "0px"}, 400);
        $("#balk2").animate({"margin-left": "0px"}, 400);
        $("#balk3").animate({"margin-left": "0px"}, 400, function () {
            setTimeout(function () {
                $("#balk1").animate({"margin-left": "-2000px"}, 400);
                $("#balk2").animate({"margin-left": "4000px"}, 400);
                $("#balk3").animate({"margin-left": "-5000px"}, 400, function () {
                    setTimeout(function () {
                        $("#balk4").animate({"margin-left": "0"}, 400);
                        $("#balk5").animate({"margin-left": "0"}, 400);
                        $("#balk6").animate({"margin-left": "0"}, 400, function () {
                            setTimeout(function () {
                                $("#balk4").animate({"margin-left": "2000px"}, 400);
                                $("#balk5").animate({"margin-left": "-4000px"}, 400);
                                $("#balk6").animate({"margin-left": "5000px"}, 400, function () {
                                    setTimeout(mijnfunctie, 600);
                                });
                            }, 1600);
                        });
                    }, 600);
                });
            }, 1600);
        });
    }, 0);
};
mijnfunctie();

无论如何，我宁愿建议类似的东西:)

(function () {
    var objects = new Array(6),
        index = 0,
        steps = [
            [[0,'0px'],[1, '0px'],[2, '0px']],
            1600,
            [[0,'-2000px'],[1,'4000px'],[2,'-5000px']],
            600,
            [[3,'0px'],[4,'0px'],[5,'0px']],
            1600,
            [[3,'2000px', '-400px', '5000px']],
            600
        ],
        i = 6,
        crawler;

    while(i--) { objects[i] = $('#balk'+(i + 1)); };

    crawler = function () {
        var step, k;
        if (index >= steps.length) index = 0;
        step = steps[index];
        ++index;
        if (typeof(step) == 'number') {
            setTimeout(step, crawler);
        } else {
            k = step.length - 1;
            while(k--) {
                objects[k[0]].animate({'margin-left': step[k[1]]}, 400, (k ? null : crawler)});
            }
        }
    };
    crawler();
}());

或更通用且可重用的东西

于 2012-12-08T13:09:31.333 回答
0

Gerrit，您setInterval(mijnfunctie, 6000);在同一个函数中使用函数，这就是它循环自身并 setInterval(mijnfunctie, 6000);多次调用函数的原因..

因此 setInterval(mijnfunctie, 6000);建议只调用一次函数（第一次调用的地方）。

享受..！

于 2012-12-08T13:29:42.950 回答