我有一个脚本，它使用 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');
}
关于javascript - 我可以让获取函数每隔几秒重复一次吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64032097/