Question

我一直在环顾四周，似乎无法弄清楚如何做到这一点，虽然看起来很简单。（移动开发）

我正在尝试做的是在进行计算时显示一条消息（有点像警报，但不是警报，更像是对话框）。就像加载一样，请稍候。我希望消息出现并在计算完成时保持在那里然后被删除。我似乎无法找到这样做的正确方法。

按下提交按钮并首先检查以确保填写所有表格，然后它应显示消息，进行计算，然后隐藏消息。

这是计算功能。

   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

感谢大家的时间，非常感谢

Answer 1

最好将显示代码与计算代码分开。它应该大致看起来像这样

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

如果您在执行上述任何步骤时遇到问题，请将其添加到您的问题中。

Answer 2

在开始计算之前，您需要让UI主线程有机会呈现您的消息。

这通常是这样做的：

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

使用计时器可以让代码进入事件循环，更新UI，然后启动计算。

Answer 3

计算机很快。真的很快大多数现代计算机每秒可以执行数十亿条指令。因此，我相当肯定你可以依靠一个setTimeout函数来启动大约1000毫秒就足以显示加载消息。

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>

Answer 4

您已使用某个部分弹出“结果”页面 - 为什么不弹出“计算”页面？

真的，有4,000,000种不同的方法可以解决这个问题，但是为什么不尝试编写“displayCalculatingMessage”函数和“removeCalculatingMessage”函数，如果你不想在这么简单的事情上得到所有面向对象的东西。

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
}

有十亿种方法可以实现这一点，这一切都取决于你希望它如何呈现给用户 - 你希望发生什么。

在进行计算时显示消息javascript

4 个答案: