滚动UI时，UI未更新

Question

我正在处理Cordova应用程序。在那里我连接到一个实时传感器，并从传感器读取一些数据。问题是当我滚动视图时，数据被打乱了。这在安卓系统中有效，但在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

iOS会在滚动过程中暂停JS执行，以提供流畅的滚动体验。Apple建议使用被动事件监听器进行滚动。即使基于另一个试图揭穿执行的答案，您的问题也没有解决方案。您可以尝试将passive设置为true：

something.addEventListener("scroll", callback, { passive: true })

虽然它可以改善您的情况，但很可能不会解决您在iOS上遇到的问题。

尝试用requestIdleCallback或requestAnimationFrame包装您的代码。

确保您遵循的是不要多次访问DOM树的建议。

Answer 2

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

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更新将每150ms触发一次，这应该会为scroll事件的处理留下足够的空间。