UI is not updating while scrolling the UI

Question

I am working on Cordova application. Where i am connecting to a real time sensor and reading some data from the sensor. Problem is the data is scrambled when i scroll the view. This is working in android but not in iOS.

Here is my code snippet.

<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 will be called for each data received from sensor. This callback also blocking until scroll finished. How to update the ui even while scrolling the UI.

Answer 1

iOS pauses JS execution during scroll to deliver smooth scrolling experience. Apple suggest to use passive event listeners for scroll. There is no solution to your problem even based on the other answer that tries to debounce the execution. You could try to set passive to true:

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

Although it could improve your situation, most probably won't fix the issue you are having on iOS.

Try wrapping your code in requestIdleCallback or requestAnimationFrame.

Make sure you are following the advise for not accessing the DOM tree more than once.