我怎么能一直在页面中滚动内容？

I`ll receive logs from servers per 5 seconds.I need to add new messages to the page,such as

我将每5秒从服务器接收一次日志。我需要向页面添加新消息,例如

append/repend

But the question is how could I let it just like a living show to notify users new logs are coming...it`s much similar to Log.io,I have watched its code.But it can't fit my situation for I add new nodes and css style to each log. And my code is:

但问题是我怎么能让它像一个活生生的节目通知用户新的日志即将来临...它与Log.io非常相似,我已经看过它的代码。但它不适合我的情况我为每个日志添加新节点和css样式。我的代码是:

$("#log-content").append('<p>' + str + '</p>');
$("html, body").animate({
  scrollTop: $(document).height()
});

Sometimes the result looks very strange.So I need some help. Thanks!

有时结果看起来很奇怪。所以我需要一些帮助。谢谢!

2 个解决方案

#1

If you want the server to notify the users of new 'events' then you'll need to use sockets (This is how Log.io does it) to push new items to the client. Either that or have a method on the server that the client can poll via a looping ajax call.

如果您希望服务器通知用户新的“事件”,那么您将需要使用套接字(这是Log.io的工作方式)将新项目推送到客户端。客户端可以通过循环ajax调用轮询或在服务器上有一个方法。

#2

Thanks for your help. Logs will be send to client every 5 seconds from the server.So what I need to do is how to show it like logs is cominmg & changing. And I found a solution finally.

谢谢你的帮助。日志将每隔5秒从服务器发送到客户端。所以我需要做的是如何显示它就像日志是cominmg和更改。我终于找到了解决方案。

var obj;       // arrary of logs
var index;
function renderLog() {
    if (index < obj.length ) {
         //change the css style of the log, and set display is unvisible.
        $("#log-content")  .prepend(obj[index++]);
        slideDown(3, function() {    renderLog();    });
    }
}

I've tried "for“ loop and ”animate“,but it's not works that well.It sames like all the logs execute "animate" function at the same time.The code just add events. Hope the question can help others like me.

我已经尝试过“for”循环和“animate”,但它并没有那么好用。就像所有日志同时执行“animate”功能一样。代码只是添加事件。希望这个问题可以帮助像我这样的人。