Question

I have been looking around and I cannot seem to figure out how to do this, although it seems like it would be very simple.(mobile development)

What I am trying to do is display a message (kind of like an alert, but not an alert, more like a dialog) while a calculation is being made. Simply like a Loading please wait. I want the message to appear and stay there while the calculation is being done and then be removed. I just cannot seem to find a proper way of doing this.

The submit button is pressed and first checks to make sure all the forms are filled out then it should show the message, it does the calculation, then hides the message.

Here is the Calculation function.

   function scpdResults(form) {
        //call all of the "choice" functions here
        //otherwise, when the page is refreshed, the pulldown might not match the variable
        //this shouldn't be a problem, but this is the defensive way to code it
        choiceVoltage(form);
        choiceMotorRatingVal(form);
        getMotorRatingType();
        getProduct();
        getConnection();
        getDisconnect();
        getDisclaimer();
        getMotorType();

        //restore these fields to their default values every time submit is clicked
        //this puts the results table into a known state
        //it is also used in error checking in the populateResults function
        document.getElementById('results').innerHTML = "Results:";
        document.getElementById('fuse_cb_sel').innerHTML = "Fuse/CB 1:";
        document.getElementById('fuse_cb_sel_2').innerHTML = "Fuse/CB 2:";
        document.getElementById('fuse_cb_result').innerHTML = "(result1)";
        document.getElementById('fuse_cb_res_2').innerHTML = "(result2)";
        document.getElementById('sccr_2').innerHTML = "<b>Fault Rating:</b>";
        document.getElementById('sccr_result').innerHTML = "(result)";
        document.getElementById('sccr_result_2').innerHTML = "(result)";
        document.getElementById('contactor_result').innerHTML = "(result)";
        document.getElementById('controller_result').innerHTML = "(result)";

        //Make sure something has been selected for each variable
        if (product === "Choose an Option." || product === "") {
            alert("You must select a value for every field.  Select a Value for Product");
        **************BLAH************
        } else {

            //valid entries, so jump to results table
            document.location.href = '#results_a';


    ******This is where the message should start being displayed***********

            document.getElementById('motor_result').innerHTML = motorRatingVal + " " + motorRatingType;
            document.getElementById('voltage_res_2').innerHTML = voltage + " V";
            document.getElementById('product_res_2').innerHTML = product;
            document.getElementById('connection_res_2').innerHTML = connection;
            document.getElementById('disconnect_res_2').innerHTML = disconnect;

            if (BLAH) {

            }
            else {

            }

            populateResults();
            document.getElementById('CalculatedResults').style.display = "block";

        } //end massive else statement that ensures all fields have values


*****Close out of the Loading message********
    } //scpd results

Thank you all for your time, it is greatly appreciated

Answer 1

Computers are fast. Really fast. Most modern computers can do several billion instructions per second. Therefore, I’m fairly certain you can rely on a a setTimeout function to fire around 1000ms to be sufficient to show a loading message.

if (product === "Choose an Option." || product === "") {
  /* ... */
} else {
  /* ... */
  var loader = document.getElementById('loader');
  loader.style.display = 'block';
  window.setTimeout(function() {
    loader.style.display = 'none';
    document.getElementById('CalculatedResults').style.display = "block";
  }, 1000);
}

<div id="loader" style="display: none;">Please wait while we calculate.</div>