Animierte Darstellung der Spiralmatrix

Question

Ich habe einen versteckten Tisch mit Spiralmatrix gefüllt. Ich muss jede Zelle mit einiger Verzögerung einzeln zeigen. Zuerst möchte ich die Zeile von 0,0 bis bot (0, Rand) -> rechts -> oben füllen. Dann möchte ich 2 Funktionen LeftAndBot und RightAndTop machen. Es funktioniert für mich ohne setTimeout. Aber ich kann nicht verstehen, wie man mit setTimeout für eins nach dem anderen aussehen.

spiralArray = function (edge) { 
     var arr = Array(edge), 
      x = 0, y = edge, 
      total = edge * edge--, 
      dx = 1, dy = 0, 
      n = 1, m = 1, 
      i = total, j = 0; 
     while (y) { 
      arr[--y] = []; 
     } 
     i = total+1; 

     while (total > 0) { 
      g = String(total--); 
      if (g.search('6') != -1) { 
       i++; 
      } 

     } 
     console.log(i) 
     while (i > 0) { 
      if (String(i).search('6') != -1){ 
       arr[y][x] = --i; 
       i--; 
      } else { 
       arr[y][x] = i--; 
      } 
      x += dy; y += dx; 
      if (++j == edge) { 
       if (dy < 0) {x++; y++; edge -= 2} 
       j = dx; dx = -dy; dy = j; j = 0; 
      } 

     } 

     return arr; 
    } 

    // T E S T: 
    arr = spiralArray(edge = 5); 
    for (y = 0; y < edge; y++) console.log(arr[y].join()); 

    tHdr = "<table id = table >"; 
    document.write(tHdr); 
    for (i = 0; i < edge; i++) { 
     document.write("<tr>"); 
     for (j = 0; j < edge; j++) { 
      td = "<td id = "+i + "_" + j + ">"; 
      td += "</td>"; 
      document.write(td); 
     } 
     document.write("</tr>"); 
    } 
    document.write("</table>"); 
    for (i = 0; i < edge; i++) { 
     for (j = 0; j < edge; j++) { 
      document.getElementById(""+i + "_" +j).innerHTML = arr[i][j]; 
     } 
    } 
// Its work. Full bot,right,top lines. 
    $(function(){ 
     var f = function(j, i, k) { 
      if (j < edge) { 
       setTimeout(function() { 
        $("#" + j + "_" + i).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
        f(++j, i, k); 
       }, duration*100) 
      } 
      if (j == edge) { 
       if (i < edge) { 
        setTimeout(function() { 
         $("#" + (j-1) + "_" + ++i).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
         f(j, i, k); 
        }, duration*100) 
       } 
      } 
      if (i == edge-1) { 
       if (k >= 0) { 
        setTimeout(function() { 
         $("#" + --k + "_" + (i-1)).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
         f(j, --i, k); 
        }, duration* 100) 
       } 
      } 

     }; 

     x = 1, y = 1, i = 0, j = 0, k=edge-1, indent = 1, duration = 1; 
     f(j, i, k); 

     moveToLeftAndBot(edge); 
    }); 
// Its doesnt work, I dont know how to write this 
    function moveToLeftAndBot(edge) { 
     var f2 = function(j, i, intend) { 
      if(i > 1) { 
       setTimeout(function() { 
        console.log("i" + intend) 
        $("#" + j + "_" + (i-1)).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
        f2(j, --i, intend); 
       }, duration * 500); 

      } 
      if (i == 1) { 
       if (j < edge-intend) { 
        setTimeout(function() { 
         console.log(intend, i , j) 
         $("#" + (j + 1) + "_" + i).css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 500); 
         f2(++j, i, intend); 
        }, duration * 500) 
       } 
      } 
     }; 
     j = 0, i = edge - 1; intend = 0; 
     for (l = 0; l < 3; l++) { 
      f2(j, ++i, ++intend); 
     } 
    } 

Answer 1

Sie sollten die Matrixtraversallogik von der Animationslogik trennen. Hier ist ein Pseudo-Code wie:

var direction = 0; // Which direction you're currently traveling: 0 = bottom, 1 = right, 2 = top, 3 = left 
var row = 0; // Which row you're currently in 
var col = 0; // Which column you're currently in 

/** 
Function which prints the current table cell and advances by 1 step in the current direction until the maxSteps is hit. Then the direction rotates and new maxSteps is calculated. 
**/ 
function PrintAndStep(stepsToTake) 
{ 
    PrintCurrentCell(); // Your HTML logic for displaying values 
    MoveToNewCell();  // Changes row or col to new values based on the direction 
    stepsToTake--;   

    if (stepsToTake == 0) // If you've reach the end of the direction 
    { 
    direction = (direction + 1) % 4; // Rotate direction 
    stepsToTake = CalculateNewNumberOfSteps(); 
    } 

    if (stepsToTake > 0) // Only continue if the rotated direction yields some steps to take 
    { 
     SetTimeout(1000, PrintAndStep(stepsToTake)); 
    }  
} 

PrintAndStep(matrixHeight); 

Beachten Sie, wie Sie brauchen nur SetTimeout Linie einmal in Ihrem Code und wie der Code ‚auslagert‘ die Bewegung und Drucklogik außerhalb Funktionen zu schreiben.