Question

The following javascript displays the final result (instead of updating every second). How can I iterate through the result of the getJSON call, display that result, and delay until I display the next element?

function display(state) {
  for (var i=0; i < state.length; i++) {
    $('#someDiv' + i).text(state[i]);
  }
}

$.getJSON('/getdata', function(data) {
  $.each(data, function(key, val) {
    setTimeout(function(){display(val)}, 1000);
  });
}

Answer 1

The problem is that in your $.each() loop you queue all the timeouts at once, all for 1000ms after the loop. The simplest way to fix that is as follows:

$.getJSON('/getdata', function(data) {
  $.each(data, function(key, val) {
    setTimeout(function(){display(val)}, 1000 * key);
  });
});

Noting that that will only work if data is an array and thus key is the integer index. If data is an object and key is not an integer index you could do this:

$.getJSON('/getdata', function(data) {
  var i = 0;
  $.each(data, function(key, val) {
    setTimeout(function(){display(val)}, 1000 * i++);
  });
});

(Set i to 1 initially if you don’t want the first update to happen immediately.)