1

フィドル 1

このフィドルでは、for ループを使用して 1 つの行に 5 つの四角形を作成しました。また、5 つの長方形を一緒に直接表示する代わりに、小さな間隔で 1 つずつ表示されるように、各繰り返しの間に間隔を設定しました。これは私のソリューションの一部です。そして、それは意図したとおりに機能しています。さて、問題は次の部分で発生します。

私が実際にやりたいことは、複数の行を作成し、長方形を最初の行に 1 つずつ表示し、次の行に同じ方法で表示することです。しかし、一度に 1 つの四角形を表示する代わりに、一度に列全体を表示するため、私のコードにはいくつかの間違いがあります。

これが2番目のフィドルです

ここで私が何をしたいのか理解していただければ幸いです。コードを修正して、四角形を 1 つずつ表示してから次の行に進むという望ましい結果を得るにはどうすればよいですか?

for (var i = 0; i < 3 ; i++) {
    for (var j = 0; j < 5; j++) {
        window.setTimeout(
        (function (i,j){ 
            return function() {
                var box = paper.rect(j*100,i*50,100,50);
                box.attr({fill:'yellow'});
            }
        })(i,j),j * 500)
    }
}
4

1 に答える 1

2

これで問題が解決すると思います：

window.onload = function() {

    var ROWS = 3,
        COLS = 5;                

    function drawGrid(paper) {
        for (var i = 0; i < ROWS; i += 1) {
            drawRow(i, paper);
        }
    }

    function drawRow(row, paper) {
        for (var i = 0; i < COLS; i += 1) {
            drawRect(row, i, paper);
        }
    }

    function drawRect(row, col, paper) {
        setTimeout(function () {
            var box = paper.rect(col*100,row*50,100,50);
            box.attr({fill:'yellow'});
        }, (row * COLS * 1000) + (col * 1000));
    }

    drawGrid(Raphael(0, 0, 1920, 1000));
}

少しリファクタリングを行い、現在の列と行に応じてタイムアウトを計算しました。

これがフィドルです：http://jsfiddle.net/dYRR2/6/

つまり、タイムアウトi * 500 * 5 + j * 500はj * 500.

于 2012-12-17T14:28:13.510 に答える