Asynchronous grids move

Asynchronous grid move is an effect that one grid starts to move after completion of another grid. If there're only 2 grids, you can use callback function to start the action of the next grid cell. But for a number of grid cells, it's more reasonable to use for loop and setTimeout method.

In the same way, we create a grid as what we did for syncronous grids move. The iteration looks like below. Note the delay span is different for different grid cells. The later, the longer.

function go(){
  var delay = 200    
      for (var i = 0 ;i < grdss.length;i++){ 
         (function(j) {          
                 if (j==0) {        
                      to = getdir(ii);
                      t = setTimeout(go,delay*grdss.length*2+delay); 
                   if (ii==dirs.length) ii=0;
                  if (j==grdss.length-1) {
                      for (var c = grdss.length - 1;c>-1;c--){
                          (function(jj) {
                                 jj = jj-1;
                            },delay*(grdss.length -jj)); 
                           }) (c);  


Asyncronous grid move.

Last updated on Oct.18, 2010