滚动UI时,UI不会更新

Question

我正在研究Cordova应用程序.我在哪里连接到实时传感器并从传感器读取一些数据.问题是当我滚动视图时数据被加扰.这适用于Android但不适用于iOS.

这是我的代码片段.

<div id="right_col">
   <button onclick="clearReceivedData()">Clear Received Data</button>
   <br>
   <div id="receivedData"></div>
</div>


function dataReceivedCallback(data) {
  document.getElementById("receivedData").innerHTML += data.value1 + ": ";
  document.getElementById("receivedData").innerHTML += data.value2 + ":";
  document.getElementById("receivedData").innerHTML += data.value3 + "<br>";
}

dataReceivedCallback将从传感器接收的每个数据调用.此回调也会阻塞,直到滚动完成.如何在滚动UI时更新UI.

Answer 1

我并不完全理解你的情况 100% 但我认为你应该这样做：

1-innerHTML尽可能少地访问，每次读取或写入元素属性时都会强制文档重新渲染，下面是更好的方法。

function dataReceivedCallback(data) {
  var newHTML = '';
  newHTML  += data.value1 + ": ";
  newHTML  += data.value2 + ":";
  newHTML  += data.value3 + "<br>";
  document.getElementById("receivedData").innerHTML += newHTML;
}

正如你所看到的，我们只访问了innerHTML一次而不是 3 次

2-您需要给浏览器留出一些空间来处理滚动事件，因此您需要使用异步函数更新ui，同样可以利用超时函数来执行此操作：

var timeoutHandller;
function dataReceivedCallback(data) {
  clearTimeout(timeoutHandller);
  timeoutHandller = setTimeout(function() {

    var newHTML = '';
    newHTML  += data.value1 + ": ";
    newHTML  += data.value2 + ":";
    newHTML  += data.value3 + "<br>";
    document.getElementById("receivedData").innerHTML += newHTML;
  }, 150);
}

现在，UI 更新只会每 150 毫秒触发一次，这应该为滚动事件的处理留出足够的空间。