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

これはスライダー用に作成されており、正常に機能します。6回、そして6回目以降、それは混乱し始めています。それで、どこかで時間が正しくありませんが、どこで？

4

3 に答える 3

3

setInterval繰り返し関数をキューに入れます。エンキューしている関数の最後で実行しているため、12 秒後に 2 回実行されます。さらに 6 秒ごとにカウントが 2 倍になります。ゆっくりと、これはブラウザを屈服させます。わずか 1 分間で 500 個のタイマーが設定され、2 分間で 500,000 個のタイマーが設定されます...

setInterval繰り返したい関数の外に移動するか、(より良い) 関数に変更しますsetTimeout(これにより、呼び出しが 1 回だけキューに入れられます)。

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

第二に、あなたの最初の呼び出しにsetTimeoutは引数がありません。デフォルト値が何であれ、常に指定する必要があります。

第 3 に、アニメーションが数秒遅れると、その後のアニメーションはすぐに実行されます。これを防ぐには、正しいタイミングに依存するのではなく、アニメーションをチェーン化することをお勧めします。その場合、ピラミッド効果 (極端なインデント) を防ぐために、次の形式をお勧めします。

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

function phase2(){
  ...

...

function phaseN(){
  $(...).animate(..., phase1);
}
于 2012-12-08T13:11:51.793 に答える
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();
}());

または、より一般的で再利用可能なもの

于 2012-12-08T13:09:31.333 に答える
0

setInterval(mijnfunctie, 6000);同じ関数内で関数を 使用しているので、それ自体がループしてsetInterval(mijnfunctie, 6000);関数を複数回呼び出しています。

したがって、 setInterval(mijnfunctie, 6000);関数を1回だけ呼び出す（最初に呼び出される場合）ことをお勧めします。

楽しみ..！

于 2012-12-08T13:29:42.950 に答える