我可以获取每隔几秒重复一次的获取功能吗

Question

我有一个脚本使用 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, '&nbsp;&nbsp;&nbsp');
            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>

Answer 1

您可以使用 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');

}

我可以获取每隔几秒重复一次的获取功能吗

Can I get a fetch function to repeat every few seconds

javascript

function

polling

fetch