javascript - 滚动 UI 时 UI 未更新

Question

我正在开发 Cordova 应用程序。我在哪里连接到实时传感器并从传感器读取一些数据。问题是当我 ScrollView 时数据被打乱。这在 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

iOS 在滚动期间暂停 JS 执行以提供流畅的滚动体验。 Apple 建议使用被动事件监听器进行滚动。即使基于试图使执行去抖动的其他答案，也无法解决您的问题。您可以尝试将 passive 设置为 true:

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

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

尝试将您的代码包装在 requestIdleCallback 或 requestAnimationFrame 中。

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