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

问题描述

我有一个脚本，该脚本使用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,'&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>

解决方法

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

}

fetch function function javascript polling

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

问题描述

解决方法

相关问答