输出一次获取 JSON 结果，它们每 x 秒更新一次，结果不会一遍又一遍地重复

Question

我之前在 stackoverflow 上解决了一个问题，但我的项目要求发生了变化，所以我需要一个新的解决方案。总结一下，我有一个 getJSON 函数，它每 5 秒执行一次以读取 JSON 文件中的更改。我遇到的问题是正确输出数据。我希望数据输出一次，但每 5 秒更新一次，以防用户对 JSON 文件进行更改

这是我的代码

 <script type="text/javascript">
$.ajaxSetup({
    cache: false
});
setInterval(function() {
    $.getJSON('names.json', function(data) {
        for (var i in data) {
            $('#one').append(data[i]);
        }
    });
}, 5000);

</script>

这个 getJSON 函数允许我抓取 JSON 数据并将其附加到 div 的开头。然后我刷新函数，这样如果 JSON 数据发生变化，那么 div 中的数据也会发生变化。问题是数据每 5 秒重复一次。

15 秒后的意外结果

453545Beady little eyesLittle birds pitch by my doorstep
453545Beady little eyesLittle birds pitch by my doorstep
453545Beady little eyesLittle birds pitch by my doorstep

15秒后我想要的结果

453545Beady little eyesLittle birds pitch by my doorstep

如果我在脚本运行时更改 JSON 11 秒

"two": "Eyes"

我想在 15 秒后得到的结果

453545 Eyes Little birds pitch by my doorstep

而不是我在 15 秒后得到的实际结果

453545Beady little eyesLittle birds pitch by my doorstep
453545Beady little eyesLittle birds pitch by my doorstep
453545 Eyes Little birds pitch by my doorstep

这是我正在使用的 JSON 文件

{
  "one": "453545",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

希望我已经尽可能清楚地说明了这一点

Answer 1

很难解读您的问题，因为您实际尝试实现的结果可能有两种不同的结果：

• 仅显示最新的 JSON 结果（无更改历史记录）
• 每次更改仅显示一个 JSON 结果（更改历史记录）

第一个很简单，如下：

无历史记录：在显示之前清除结果

在附加新收到的结果之前，您必须清除以前的结果。

<script type="text/javascript">

    $.ajaxSetup ({  
        cache: false  
    });  

    setInterval(function(){
        $.getJSON('names.json', function(data) {
            $('#one').empty();
            for(var i in data) {
                $('#one').append(data[i]);
            }
        });
    }, 5000);

</script>

更改历史记录：检测更改

保留更改历史有几种不同的方法：

1. rogal111 以某种方式总结了第一个。尽管他的解决方案可能不是最好的，尤其是当您生成的 JSON 的格式发生变化时，因为他的代码仅在 JSON 结果至少定义了这 4 个字段时才有效。如果其中任何一个缺少undefined，将显示，如果添加任何其他，则将被省略。

2. Trinh Hoang Nhu 提供了一个更动态 的解决方案，它适用于任何 JSON 对象的属性。

3. 第三种可能的解决方案是通过附加上次更改的时间戳 (names.json/timestamp) 来调用您的 Ajax URL，如果服务器发现 JSON 之后发生了更改，它将发送对象，否则将发送一些默认对象（即false 或null），这表明没有进行任何更改...

Answer 2

只需添加到您的 JSON version 标记并在每次修改 JSON 时增加它：

{ 
  "version": 12323
  "one": "453545",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

然后在javascript中检查version标签，然后再追加：

<script type="text/javascript">
    var currentVersion=-1;
     $.ajaxSetup ({  

       cache: false  
    });  

   setInterval(function(){ $.getJSON('names.json', function(data) {

    if(data.version>currentVersion)
    {
      currentVersion=data.version;
      $('#one').append(data.one);
      $('#one').append(data.two);
      $('#one').append(data.three);
    }

   });

},5000);

</script>

Answer 3

添加一个 oldJson 与新的比较。只有当它们不同时，您才会出局。 例

var oldJSON = null;

function compareObject(a,b){//Simple comparision
   for (i in a){
       if (!(i in b) || a[i] != b[i]){
          return false;
       }
   }
   return true;
}

setInterval(function() {
    $.getJSON('names.json', function(data) {
        //do the comparision
        if (!compareObject(oldJSON, data)){
            for (var i in data) {
                $('#one').append(data[i]);
            }
        }
        oldJSON = data;; //Important
    });
}, 5000);