javascript - 時限ループ、Javascript を使用した 2 つのループ間の x 秒

Question

これから続ける: タイミング ループ、10 秒間隔

これにより、外側の for() で 10 秒ごとにループを作成する方法について、すばらしい答えが得られました。（彼ら）

ここで、内側のループ X を作成したいので、1 秒ごとに 1 回ループし、外側のループ (「Y」) を 10000ms (10 秒) に保ちます。

これどうやってするの？

Answer 1

currentXと同様の方法で追加する必要がありますcurrentY。次に、インクリメントする代わりに、をインクリメントcurrentYする必要がありますcurrentX。currentXがそれ以上の場合はxnumHigh、に戻してxnumLow増分しますcurrentY。

y基本的には、タイマーを設定するのとまったく同じことを、x代わりに実行しているだけです。

Answer 2

これを行う1つの方法は次のとおりです:(キャンバスのものは単なる視覚的表現です)

http://jsfiddle.net/J5GvM/1/

(function nestedLoop(){
    var innerStep = 10;
    var xnumLow = 0;
    var xnumHigh = 500;
    var currentX = xnumLow;

    var outerStep = 3000;
    var ynumLow = 0;
    var ynumHigh = 500;
    var currentY = ynumLow;

    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext('2d');

    var drawPixel = function(x, y){
        ctx.fillRect(x,y,1,1);
    };

    (function outerLoop(oStart, oEnd){
        currentX = xnumLow;
        currentY = oStart;

        (function innerLoop(iStart, iEnd){
            currentX = iStart;

            // Do stuff here
            drawPixel(currentX, currentY);

            if (iStart < iEnd)
                setTimeout(function(){innerLoop(++iStart, iEnd);}, innerStep); 
            else
                setTimeout(function(){outerLoop(++oStart, oEnd);}, outerStep);
        })(currentX, xnumHigh);
    })(currentY, ynumHigh);
})();​