The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet:

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 issue I am facing is that the app-status element does not change its color or text. When the button calling updateView() is clicked, the page freezes (during the processing) without updating the element.

javascripthtmlcssbootstrap-4

Answer №1

Is there a return value for the heavy processing function? Using a do-while loop here seems like a smart approach.

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

Answer №2

To ensure the computer updates the screen properly, I would implement a delay:

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting forms from a different router in React can pose a unique challenge

As a beginner in React, I am working on creating a simple meal app. In my App component, I am fetching meal data from an api and allowing users to click on a meal for more details. However, I am facing an issue where searching for a new meal on the detail ...

javascriptreactjs

Using ng-if to compare dates in AngularJS without considering the year

I am facing a comparison issue with dates in my code. I have one date that is hardcoded as the first day of the month, and another date coming from the database (stored in a JSON object). When I compare these dates using ng-if, it seems to ignore the year ...

javascriptangularjsasp.net-mvc

How can you display a set of components in React using TypeScript?

I'm currently working on rendering an array of JSX Components. I've identified two possible methods to achieve this. Method one (current approach): Create the array as an object type that stores the component properties and then build the JSX co ...

javascriptreactjstypescript

Unable to call upon JavaScript code from an external file

Just starting out with Spring and JavaScript! I've put together a JSP file https://i.sstatic.net/XemJ5.png In my first.js, you'll find the following method: function firstmethod() { window.alert("Enter a New Number"); return true; } H ...

javascripthtmljsp

Execute asynchronous functions without pausing the thread using the await keyword

When working with an express route, I need to track a user's database access without: waiting for the process to complete before executing the user's task worrying about whether the logging operation was successful or not I'm uncertain if ...

javascriptnode.jsasynchronousasync-await

Hover over a particular element using a loop in Vue.js

Is there a way to change the price button to an Add to Cart button on mouseover, considering the true false data trigger for each item? How can we specify which item to target when hovering over the price section? Below is the code snippet: template: < ...

javascriptvue.js

Utilize the nest function in D3 to organize flat data with a parent key into a hierarchical structure

I'm searching for an elegant and efficient solution to transform my input data into a hierarchical structure using d3.js nest operator. Here is an example of the input data: [ {id: 1, name: "Peter"}, {id: 2, name: "Paul", manager: 1}, {id: 3, name: " ...

javascriptjsonnestedoperatorsd3.js

Error: An unexpected symbol '<' was encountered after the build process in Vue.js

I just finished deploying a MEVN stack application to heroku. While everything is functioning properly locally, I am encountering a blank page and the following errors in the console post-deployment: Uncaught SyntaxError: Unexpected token '<' ...

javascriptexpressvue.jsheroku

Trigger a function post-rendering in a React component

Hey everyone, hope you're having a great day! I've been diving into React for a few months now. I'm making an effort to steer clear of using the traditional React Components, opting instead for React Hooks. However, there are instances wher ...

javascriptreactjsreact-hooks

Using Firebase onDisconnect with React Native

I am currently working on a React Native app and I am facing an issue where I need to update the user status to 'offline' in Firebase when the user closes the app. Here is what I have tried: import React, { Component } from 'react' ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

What is the best way to determine the left and top coordinates when resizing a draggable image within a container?

I am struggling to correctly scale the image and set the left (x) and top (y) positions. Here is the code from my template: <div id="container" :style="`height: ${height}px;width: ${size}px;overflow: hidden;position: relative;`"> ...

javascriptvue.js

Parsing PHP array using JavaScript

$namesSelect = "SELECT username FROM users"; $names = mysql_query($namesSelect); $nameCheck = mysql_fetch_array($names) This code snippet retrieves all usernames from the users table and stores them in the $names array. I am now faced with the task of ...

phpjavascriptmysqlarrays

What is the best way to retrieve a particular variable from an ng-repeat loop?

I'm currently working on a task where I have an ng-repeat loop that generates multiple dropdowns. Each dropdown is associated with a unique ID generated by the controller for reference purposes. The issue I am facing is that when a user selects an op ...

javascriptangularjs

Default check reversed for radio inputs

I am working with an MVC radio button group, and the issue I'm encountering is that even though the value of 1 "Copy" is set to checked="True", it is not displaying as pre-checked. Here's the code snippet: <div class="editor-field"> < ...

htmlradio-button

Is a footer fixed at the center anchored?

I've noticed that many solutions shared here seem to be overly complicated for what should be a simple task. My goal is to have a footer that remains fixed at the bottom of the screen regardless of page length. Although everything else seems to be wor ...

htmlcss

Unable to retrieve JSON data for the JavaScript object

I have been working on creating a JS object in the following manner var eleDetailsTop = new Array(); var j = 0; var id = "ele"+j; eleDetailsTop[id] = {id: id, size : "40%", sizeLabel : 12, type : "image", title : "Image& ...

javascriptjson

Modifying the appearance of the search box

I'm looking to customize the appearance of my search box. On Stack Overflow, you'll notice the search box is a perfect rectangle. I want mine to have rounded edges, like an ellipse, rather than being rectangular. How can I achieve this look? Than ...

htmlcss

How to extract a JavaScript object from an array using a specific field

When dealing with an array of objects, my goal is to choose the object that has the highest value in one of its fields. I understand how to select the value itself: Math.max.apply(Math, list.map(function (o) { return o.DisplayAQI; })) ... but I am unsur ...

javascriptangulartypescript

JavaScript popup menu with a redirect URL

I utilized Tinybox from this source for launching a popup webpage. I am hoping that when I click the links on the webpage, the popup will close itself and redirect to the link's URL. Here are my JavaScript and HTML codes: <script type="text/java ...

javascripthtmlpopup

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

javascripthtmlcssreactjs