javascript - 一定时间间隔后自动更新页面

Question

我有一个网站，人们可以像任何社交媒体一样添加帖子和评论。

除了自动更新功能之外，一切都运行良好:我想要的是每 20 秒后自动更新页面。

通过更新页面，我的意思是它会自动显示新添加的帖子和评论到页面。

我可以通过像

这样的 ajax 加载函数来做到这一点

$('#divid').load("page.php #divid");

但在这种情况下存在一个问题:当任何用户输入内容时，如果重新加载 div，用户文本就会丢失；如果我有无限滚动加载功能，导致网站一次又一次加载项目，该怎么办？

我认为这是可能的，因为许多网站都这样做，类似于 gmail 向我们显示新电子邮件而无需重新加载 div。

Answer 1

您应该做的是将新帖子添加到页面顶部，而不是重新加载所有内容。

AJAX 响应的示例应如下所示:

{
    "posts": [
        {
            "id": "1234",
            "title": "Post Title",
            ...
        },
        {
            "id": "1235",
            "title": "Post Title",
            ...
        }
    ],
    "comments": [
        {
            "id": "12345678",
            "post_id": "1112",
            "content": "foo",
            ...
        }
    ]
}

posts 数组应添加到页面前面。 comments 数组的每一项都应附加到相应帖子的 comments 部分。