使用来自服务器发送事件的数据控制表的写入速度

时间:2014-04-19 05:45:12

标签: javascript jquery html5 server-sent-events

我在html中编写一个表,其中包含我从服务器发送的事件中收到的数据。这是我的Javascript:

$(document).ready(
  function() {
    var sse = new EventSource('/my_event_source');

    sse.onmessage = function(e) {

      // Build the table
      values = e.data.split("\t");
      var rows_data = [];
      $.each(values, function(index, value) {
        rows_data.push("<td>" + value + "</td>")
      });

      var table_row = "<tr>" + rows_data.join() + "</tr>";
      $("#some_div").append(table_row);

    };
})

虽然表格一次写入一行,但行写得非常快!关于如何减慢写作的任何建议? JavaScript显然没有睡眠功能,所以我一直在尝试使用setTimeout(),但我没有得到我想要的结果。我也试过jQuery中的delay(),但那是动画。

1 个答案:

答案 0 :(得分:2)

不是最佳解决方案,但应该有效:

var queue=[];
var interval=setInterval(function(){addRow(), 1000});

function addRow(){
    if(queue.length > 0){
       var row= queue[0];
       queue.shift();
       $("#some_div").append(row);
    }
}

$(document).ready(
function() {
var sse = new EventSource('/my_event_source');

sse.onmessage = function(e) {

  // Build the table
  values = e.data.split("\t");
  var rows_data = [];
  $.each(values, function(index, value) {
    rows_data.push("<td>" + value + "</td>")
  });

  var table_row = "<tr>" + rows_data.join() + "</tr>";
  queue.push(table_row);      


};

})