1

小提琴 1

在这个小提琴中，我使用 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)
    }
}
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 回答