HTML element update event not called because of heavy JS function

Question

I have a pretty CPU intensive operation running in a JS function. To indicate to the user when it starts and stops, I am trying to display a badge. Here's what the code looks like:

function updateView() {
    console.log(1)
    document.getElementById('app-status').className = "badge badge-danger";
    document.getElementById('app-status').textContent = "Processing";
    console.log(2)
    setTimeout(myUpdateView(), 0)
    console.log(5)
    document.getElementById('app-status').className = "badge badge-success";
    document.getElementById('app-status').textContent = "Ready"; console.log(6)

}

function myUpdateView() {

    console.log(3)

    updateFlightParameters();

    // Get departure airport.
    var departureAirportICAO = $("#DEPARTURE_AIRPORT").val();
    if (airports[departureAirportICAO] === undefined) {
        alert("Departure airport is incorrect.");
    } else {
        departureAirport = airports[departureAirportICAO];
    }
    // Get arrival airport.
    var arrivalAirportICAO = $("#ARRIVAL_AIRPORT").val();
    if (airports[arrivalAirportICAO] === undefined) {
        alert("Arrival airport is incorrect.");
    } else {
        arrivalAirport = airports[arrivalAirportICAO];
    }

    // Create waypoints.
    createWaypoint(departureAirport);
    createWaypoint(arrivalAirport);

    // Create path. THIS FUNCTION CALLS SOME OTHER ASYNC FUNCTIONS.
    generatePolylines(flightWaypoints);
    console.log(4)

}

The problem is that the app-status element never changes it's color or text. Upon clicking the button that calls updateView(), the page hangs (to do the processing) without changing the element.

https://stackoverflow.com/questions/42773714/is-async-await-truly-non-blocking-in-the-browser — Rafael Herscovici, Jul 08 '19 at 13:35
Can you verify if the control returns from doHeavyProcessing method? — ArslanIqbal, Jul 08 '19 at 13:42

score 1 · Answer 1 · answered Jul 08 '19 at 13:38

Does the heavy processing function return anything? This seems like a good idea for a do-while statement.

const doSomethingCool(){
 let trackingVariable = false;
 do{
 result = setInterval(massiveCompute, 100)
 if(result === true){
  trackingVariable = true;
 }
} while (trackingVariable == false)

score 1 · Answer 2 · answered Jul 08 '19 at 13:39

1

I would make sure the computer has time to update the screen:

function doHeavyProcessing() {
  for (var i=0;i<1000000000;i++) ;
  document.getElementById('app-status').className = "badge badge-success";
  document.getElementById('app-status').textContent = "Ready";
}

function updateView() {
  document.getElementById('app-status').className = "badge badge-danger";
  document.getElementById('app-status').textContent = "Processing";
  setTimeout(doHeavyProcessing,100)
}
updateView()

.badge-danger { color:red }
.badge-success { color:green }

<div id="app-status"></div>

answered Jul 08 '19 at 13:39

mplungjan

169,008
28
173
236

Then you are not telling us the complete story. What does the doHeavyProcessing actually do and is it an async function? – mplungjan Jul 08 '19 at 13:52
Did you move `document.getElementById('app-status').className = "badge badge-success"; document.getElementById('app-status').textContent = "Ready"; console.log(6)` to the end of the myUpdateView function? – mplungjan Jul 08 '19 at 13:54
I tried that and it led to the text being changed to "Processing" **after** execution of the function and it was never set to "Ready" again. – Sam Fischer Jul 08 '19 at 14:03
using `setTimeout(myUpdateView(), 100)` ? – mplungjan Jul 08 '19 at 14:13
Yes. I believe it's due to the async functions that are being called. – Sam Fischer Jul 08 '19 at 16:01

HTML element update event not called because of heavy JS function

2 Answers2