Question

在这个小提琴中，我使用for循环在一行上创建了5个矩形形状。此外，我在每次迭代之间设置了一个间隔，这样它们不是直接一起显示5个矩形，而是以一个小间隔逐个显示。这是我的解决方案的一部分。它按预期工作。现在问题出现在下一部分。

我真正想要做的是创建多个行，并且矩形应该在第一行上逐个显示，然后在下一行中以相同的方式显示。但是我的代码中存在一些错误，因为它不是一次显示一个矩形，而是一次显示整个列。

我希望你明白我想在这里做什么。如何更正代码并逐个显示矩形然后前进到下一行？

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)
    }
}

Answer 1

我认为这可以解决您的问题：

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。

RaphaelJS使用for循环创建矩形

1 个答案: