For loop RaphaelJS使用for循环和interval创建矩形

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

---

我实际上想做的是创建多行，并且矩形应该在第一行上逐个显示，然后在下一行上以相同的方式显示。但我的代码中有一个错误，即不是一次显示一个矩形，而是一次显示整个列

这是你的电话号码

---

我希望你明白我想在这里做什么。如何更正代码并获得所需的结果，即逐个显示矩形，然后前进到下一行

---

for（变量i=0；i<3；i++）{
对于（var j=0；j<5；j++）{
window.setTimeout(
（函数（i，j）{
返回函数（）{
变量框=纸张矩形（j*100，i*50100,50）；
attr（{fill:'yellow'}）；
}
})（i，j），j*500）
}
}

我认为这解决了您的问题：

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

window.onload=function（）{
变量行=3，
COLS=5；
功能绘图网格（纸）{
对于（变量i=0；i<行；i+=1）{
抽屉（i，纸）；
}
}
功能绘图行（行、纸）{
对于（变量i=0；i

​ ​ 我只是进行了一些重构，并根据当前列和行计算超时

这是小提琴：

---

换句话说，超时应该是

i*500*5+j*500

而不是

j*500

谢谢您的解决方案。你能告诉我我的代码有什么问题吗？超时应该是

i*500*5+j*500

而不是

j*500

。

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