Javascript 如何自动检查JSON中的新数据？

我提前道歉；在研究这一点后，我发现了大量的资源，因为我不熟悉编程，将其缝合到我的代码中是一项挑战。我想我应该向专家请教一下

我正在使用JSON将数据从Google Sheets拖到我的网站上。但是，如果我更改GoogleSheets数据，JSON不会自动更新，除非我刷新页面。我想在我的网站上实时更新数据，而不刷新页面

GoogleSheets每5分钟发布一次更新，这对我的需求来说“足够活”。如何使下面的JSON脚本每5分钟检查一次新数据？先谢谢你

<canvas id="myChart"></canvas>
</div>

<script>
function BuildChart(labels, values, chartTitle) {
    var data = {
        labels: labels,
        datasets: [{
            label: chartTitle, // Name the series
            data: values,
            backgroundColor: ['rgb(54, 162, 225)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
            ],
        }],
    };

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true, // Instruct chart js to respond nicely.
            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
            scales: {
                xAxes: [{
                        scaleLabel: {
                        display: true,
                        labelString: 'Your Account'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: ''
                    }
                }]
            },
        }
    });

    return myChart;
}


var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.response);
      console.log(json);

// Map json labels  back to values array
var labels = json.feed.entry.map(function (e) {
  return e.gsx$twitter.$t;
});

// Map json values back to values array
var values = json.feed.entry.map(function (e) {
    return e.gsx$followers.$t;e.gsx$followers2
});

BuildChart(labels, values, "Followers");
    }
  };
  xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1DC1eO0s6haFI59HNeNEL27T4tDVYIBfYGxzp882xjDo/od6/public/full?alt=json", false);
  xhttp.send();
    </script>```

函数构建图（标签、值、图表标题）{
风险值数据={
标签：标签，
数据集：[{
标签：chartTitle，//为系列命名
数据：价值观，
背景颜色：['rgb（54162225）'，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
],
}],
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：数据，
选项：{
responsive:true，//指示chart js做出良好的响应。
maintaintAspectRatio:false，//添加以防止全宽/全高的默认行为
比例：{
xAxes：[{
scaleLabel：{
显示：对，
标签字符串：“您的帐户”
}
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“”
}
}]
},
}
});
返回我的图表；
}
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var json=json.parse（this.response）；
log（json）；
//将json标签映射回数组值
var labels=json.feed.entry.map（函数（e）{
返回e.gsx$twitter.$t；
});
//将json值映射回值数组
var values=json.feed.entry.map（函数（e）{
返回e.gsx$followers.$t；e.gsx$followers 2
});
构建图（标签、值、“追随者”）；
}
};
xhttp.open（“GET”https://spreadsheets.google.com/feeds/list/1DC1eO0s6haFI59HNeNEL27T4tDVYIBfYGxzp882xjDo/od6/public/full?alt=json“，假）；
xhttp.send（）；
```

如果希望每5分钟运行一次代码，可以将其嵌入到函数中，然后每5分钟调用一次此函数，例如

function startPolling(){setInterval(refreshData,5*60*1000);};

您可以通过

onClick

事件激活轮询功能

示例：

<div id="msg"></div><input type="button" value="Start Polling" onClick="startPolling();" />
<canvas id="myChart"></canvas>
</div>

<script>
function startPolling(){setInterval(refreshData,5*60*1000);}
function refreshData(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.response);
      console.log(json);

// Map json labels  back to values array
var labels = json.feed.entry.map(function (e) {
  return e.gsx$twitter.$t;
});

// Map json values back to values array
var values = json.feed.entry.map(function (e) {
    return e.gsx$followers.$t;e.gsx$followers2
});

BuildChart(labels, values, "Followers");
    }
  };
  xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1DC1eO0s6haFI59HNeNEL27T4tDVYIBfYGxzp882xjDo/od6/public/full?alt=json", false);
  xhttp.send();
}
function BuildChart(labels, values, chartTitle) {
    var data = {
        labels: labels,
        datasets: [{
            label: chartTitle, // Name the series
            data: values,
            backgroundColor: ['rgb(54, 162, 225)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
                'rgb(54, 162, 235)',
            ],
        }],
    };

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true, // Instruct chart js to respond nicely.
            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
            scales: {
                xAxes: [{
                        scaleLabel: {
                        display: true,
                        labelString: 'Your Account'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: ''
                    }
                }]
            },
        }
    });

    return myChart;
}

    </script>

函数startPolling（）{setInterval（refreshData，5*60*1000）；}
函数refreshData（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var json=json.parse（this.response）；
log（json）；
//将json标签映射回数组值
var labels=json.feed.entry.map（函数（e）{
返回e.gsx$twitter.$t；
});
//将json值映射回值数组
var values=json.feed.entry.map（函数（e）{
返回e.gsx$followers.$t；e.gsx$followers 2
});
构建图（标签、值、“追随者”）；
}
};
xhttp.open（“GET”https://spreadsheets.google.com/feeds/list/1DC1eO0s6haFI59HNeNEL27T4tDVYIBfYGxzp882xjDo/od6/public/full?alt=json“，假）；
xhttp.send（）；
}
函数构建图（标签、值、图表标题）{
风险值数据={
标签：标签，
数据集：[{
标签：chartTitle，//为系列命名
数据：价值观，
背景颜色：['rgb（54162225）'，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
“rgb（54162235）”，
],
}],
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：数据，
选项：{
responsive:true，//指示chart js做出良好的响应。
maintaintAspectRatio:false，//添加以防止全宽/全高的默认行为
比例：{
xAxes：[{
scaleLabel：{
显示：对，
标签字符串：“您的帐户”
}
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“”
}
}]
},
}
});
返回我的图表；
}

您可以通过将

xhttp

（Ajax）代码包装到函数中来轮询工作表。然后使用

setTimeout

每隔X毫秒调用一次该函数。您可能需要先销毁旧图表，然后再添加更新的图表。@hungerstar，您是对的，但我在实现这一点时遇到了困难。至少可以说，我缺乏编程技能。我会继续挖掘，再次感谢@异端猴子-是的，但实现是另一回事（我知道这对你来说一定很简单，但我不熟悉编程）。将继续尝试实施一些东西，谢谢！