I'm writing a table in html with data I receive from a server-sent event. Here is my 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);
};
})
While the table is written one row at a time, the rows are written really fast! Any advice on how to slow the writing down? JavaScript apparently does not have a sleep function, so I have been trying to use setTimeout(), but I am not getting the result I want. I have tried delay() from jQuery as well, but that is for animation.
Not the best solution, but should work:
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);
};
})