如何解决我可以获取每隔几秒钟重复一次的提取功能吗?
我有一个脚本,该脚本使用Fetch从设备上的传感器获取一些值,一切正常,但是值经常更改。我希望这些值每秒钟更新一次,但是现在让我工作的唯一方法是添加一个每秒刷新一次浏览器的函数。这不是很优雅。
我是否可以循环重复执行fetch命令?这样一来,它无需刷新浏览器就能每秒获取新值?
这是我的代码:
<script>
fetch('http://192.168.1.114/rr_Status?type=3')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendDataAsTable(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function addCell(tr,val) {
var td = document.createElement('td');
td.innerHTML = val;
tr.appendChild(td)
}
function addRow(tbl,val_1,val_2) {
var tr = document.createElement('tr');
addCell(tr,val_1);
addCell(tr,'  ');
addCell(tr,val_2);
tbl.appendChild(tr)
}
function appendDataAsTable(data) {
tbl = document.getElementById('tbl');
addRow(tbl,'Layer Number',data.currentLayer);
addRow(tbl,'Fan Speed',data.params.fanPercent[0] + '%');
addRow(tbl,'Print Progress',data.fractionPrinted + '%');
addRow(tbl,'Current Speed',data.speeds.top + 'mm/s');
addRow(tbl,'Hotend Temp',data.temps.current[1] + '°C');
addRow(tbl,'bed Temp',data.temps.current[0] + '°C');
addRow(tbl,'ChAmber Temp',data.temps.current[2] + '°C');
}
</script>
</head>
<body>
<div>
<table id="tbl" border="0" cellspacing="5" align="left" style="font-weight:bold"></table>
</div>
</body>
解决方法
您可以使用setInterval
函数每隔几秒钟调用一次请求。
在这里,当文档准备就绪时,我们正在设置一个间隔,以每5秒触发一次fetchStatus
函数的调用。
function fetchStatus() {
fetch('http://192.168.1.114/rr_Status?type=3')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendDataAsTable(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
}
window.addEventListener('load',function () {
// Your document is loaded.
var fetchInterval = 5000; // 5 seconds.
// Invoke the request every 5 seconds.
setInterval(fetchStatus,fetchInterval);
});
更新:您可以对appendDataAsTable
进行少许更改以替换而不是附加,这样可以解决重复的渲染问题。
function appendDataAsTable(data) {
tbl = document.getElementById('tbl');
// Overwrite the existing HTML with new content received.
tbl.innerHTML = '';
addRow(tbl,'Layer Number',data.currentLayer);
addRow(tbl,'Fan Speed',data.params.fanPercent[0] + '%');
addRow(tbl,'Print Progress',data.fractionPrinted + '%');
addRow(tbl,'Current Speed',data.speeds.top + 'mm/s');
addRow(tbl,'Hotend Temp',data.temps.current[1] + '°C');
addRow(tbl,'Bed Temp',data.temps.current[0] + '°C');
addRow(tbl,'Chamber Temp',data.temps.current[2] + '°C');
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。