Question

我的问题出在一些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();

这是为滑块制作的，它工作正常。六次，并在第六次之后开始混淆。所以某个时间不对，但在哪里？

Answer 1

setInterval会将重复的功能排入队列。因为你在你入队的函数结束时这样做了，十二秒后，它会运行两次。每六秒钟后，它们的数量将增加一倍。慢慢地，这会让浏览器瘫痪。你只需要一分钟就可以设置500个计时器，第二分钟可以设置500 000个计时器...

将setInterval移到您想要重复的功能之外，或者（更好）将其更改为setTimeout（这将使一次出现的通话排队）。

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

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

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

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

function phase2(){
  ...

...

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

Answer 2

您不能依赖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();
}());

或更通用且可重复使用的内容

Answer 3

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

因此，建议只调用setInterval(mijnfunctie, 6000);函数一次（在第一次调用时）。

享受..！

setInterval和setTimeout速度更改

3 个答案: