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>

更改历史记录：检测更改

保持变更历史有几种不同的方法：

第一个由rogal111以某种方式汇总。虽然他的解决方案可能不是最好的，特别是当您生成的JSON的格式发生更改时，因为他的代码仅在JSON结果至少定义了4个字段时才起作用。如果其中任何一个缺失undefined将会显示，如果添加任何其他的，将被省略。
Trinh Hoang Nhu提供了更多动态解决方案，该解决方案适用于任何JSON对象的属性。
第三种可能的解决方案是通过附加上次更改的时间戳（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);

输出getJSON结果一次，每隔x秒更新一次，结果不会重复

3 个答案:

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

更改历史记录：检测更改