Display Message Javascript While A Calculation Is Being Made

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 m

Solution 1:

It is a good idea to separate your display code from the calculation code. It should roughly look like this

displayDialog();
makeCalculation();
closeDialog();

If you are having trouble with any of those steps, please add it to your question.

Solution 2:

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>

Solution 3:

You need to give the UI main thread a chance to render your message before starting your calculation.

This is often done like this:

showMessage();
setTimeout(function() {
    doCalculation();
    cleanUp()
}, 0);

Using the timer allows the code to fall through into the event loop, update the UI, and then start up the calculation.

Solution 4:

You're already using a section to pop up a "results" page -- why not pop up a "calculating" page?

Really, there are 4,000,000 different ways of tackling this problem, but why not try writing a "displayCalculatingMessage" function and a "removeCalculatingMessage" function, if you don't want to get all object-oriented on such a simple thing.

function displayCalculatingMessage () {
    var submit_button = getSubmitButton();
    submit_button.disabled = true;

    // optionally get all inputs and disable those, as well// now, you can either do something like pop up another hidden div,// that has the loading message in it...// or you could do something like:var loading_span = document.createElement("span");
    loading_span.id = "loading-message";
    loading_span.innerText = "working...";

    submit_button.parentElement.replaceChild(loading_span, submit_button);
}

function removeCalculatingMessage () {
    var submit_button = getSubmitButton(),
        loading_span = document.getElementById("loading-message");

    submit_button.disabled = false;
    loading_span.parentElement.replaceChild(submit_button, loading_span);

    // and then reenable any other disabled elements, et cetera.// then bring up your results div...// ...or bring up your results div and do this after
}

There are a billion ways of accomplishing this, it all comes down to how you want it to appear to the user -- WHAT you want to have happen.