0

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

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

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

这是计算功能。

   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

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

4

4 回答 4

2

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

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

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

于 2012-07-19T19:43:56.870 回答
0

您已经在使用一个部分来弹出一个“结果”页面——为什么不弹出一个“计算”页面呢？

确实，有 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
}

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

于 2012-07-19T19:55:15.377 回答
0

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

这通常是这样完成的：

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

使用计时器允许代码进入事件循环，更新 UI，然后开始计算。

于 2012-07-19T19:47:28.023 回答
0

电脑速度很快。真的很快。大多数现代计算机每秒可以执行数十亿条指令。因此，我相当确定您可以依靠 aasetTimeout函数在 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>
于 2012-07-19T19:48:08.547 回答