如何附加动态数据答案

【问题标题】：How to append dynamic data如何附加动态数据
【发布时间】：2018-04-18 05:37:56
【问题描述】：

基本上我有一个返回 JSON 的 REST api。在这个 JSON 中，它返回最后查看的主题。例如

{ lastview : ABC }

所以我想把它插入我的页面

<div class = 'lastview'>Last viewed topic: </div>

$.getJSON("json link", function(data){
 $('<a/>',{
 text: data.lastview
 }).appendTo('.lastview');

但是由于查看另一个主题后，此数据可能会发生变化。我的意思是，如果用户转到另一个主题名称 XYZ，JSON 将 lastview 从 ABC 更改为 XYZ，但 web 中的那个不会（仍然是 ABC），因为它只在页面加载时执行一次功能。

那么无论如何动态检查 JSON 并在内容更改时正确返回（我的意思是当 lastview 主题更改为 XYZ 时，div 中的主题也会自动更改为 XYZ）

谢谢

【问题讨论】：

一种方法是继续轮询数据（比如说，setTimeout 每 500 毫秒）
你的意思是每500ms调用一次函数？感觉这个方法会导致页面卡顿
除非使用其他API如WebSocket / Web Push通知，否则无法知道是否有更新，这需要更改前端和后端，REST只能Pull而不能Push

标签： javascript jquery html css dynamic

【解决方案1】：

setTimeout() 方法在指定的毫秒数后调用函数或计算表达式。

1000 毫秒 = 1 秒。

函数只执行一次。如果需要重复执行，请使用 setInterval() 方法。

setInterval({

$.getJSON("json link", function(data){

$('<a/>',
       {

         text: data.lastview

       }).appendTo('.lastview');


 }, 1000);

【讨论】：

【解决方案2】：

这是一个每 500 毫秒保持请求和更新的示例

setInterval(function() {
    // Fake ajax
    data = { lastview: "Page " + Math.floor(Math.random() * 3) };
    // Just for demo
    
    $("#lastview").empty();
    $("#lastview").append(
        $("<a></a>").text(data.lastview)
    );
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Last viewed topic: <span id="lastview"></span></div>

【讨论】：