RaphaelJS使用用於循環與間隔

在該小提琴我已經創建上使用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) 
    } 
}

來源

2012-12-17 rohan_vg

我認爲這可以解決你的問題：

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-17 14:28:13

感謝您的解決方案。你能告訴我我的代碼有什麼問題嗎？ –

超時應該是'i * 500 * 5 + j * 500'而不是'j * 500'。 –

我也編輯了我的答案，只是爲了澄清錯誤。 –

RaphaelJS使用用於循環與間隔

回答

相關問題