Question

var arr = [[1,2,3],[4,5,6],[7,8,9]];


function out(ar){

  var interval = setInterval(function(){
    for (var i=0; i<ar.length;i++){

      for (var j=0;j<ar[i].length;j++){

        document.write(ar[i][j]);

      }
    document.write("</br>");
    }
  clearInterval(interval);
  },1000);

}

out(arr);

http://jsbin.com/edanib/edit

This code works, but i would like to make one second delay before outputting every number.
The above code cannot do that. How do i do that in vanilla Javascript?

Answer 1

setInterval isn’t guaranteed to get you 1 second spacing because other things might run, but you can get close with the following

function out(ar) {
  var i = 0, j = 0;
  var interval = setInterval(function(){
    // Start with the next row if the last one was finished.
    if (i < ar.length && j == ar[i].length) {
      ++i; 
      j = 0;
      // Put a line after it.
      document.body.appendChild(document.createElement('br'));
    }
    // Check if we're out of rows.
    if (i >= ar.length) { clearInterval(interval); return; }

    // Write out a number.
    document.body.appendChild(document.createTextNode('' + ar[i][j]));

    // We're done with the cell that we just wrote.
    ++j;
  }, 1000 /* milliseconds */);
}

Put the array indices outside the function, so each time the interval fires, it gets the loop state from the last run.

Also, you can’t use document.write inside an interval handler because calling document.write after the document has closed clobbers the existing document.