jQuery顯示+延遲策略

Question

以下javascript顯示最終結果（而不是每秒更新）。 如何遍歷getJSON調用的結果，顯示結果並延遲直到顯示下一個元素？

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

問題是在$.each()循環中，您將所有超時一次排隊，所有超時都在循環后1000毫秒內進行。 最簡單的修復方法如下：

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

注意，這僅在data是數組且key為整數索引的情況下才有效。 如果data是對象，並且key不是整數索引，則可以執行以下操作：

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

（如果您不希望立即進行第一次更新，請先將i設置為1。）