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

計算を開始する前に、UIメインスレッドにメッセージをレンダリングする機会を与える必要があります。

これは多くの場合、次のように行われます。

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

タイマーを使用すると、コードをイベントループに落とし込み、UIを更新してから、計算を開始できます。

于 2012-07-19T19:47:28.023 に答える
0

コンピューターは高速です。本当に速い。最近のほとんどのコンピューターは、1秒間に数十億の命令を実行できます。setTimeoutしたがって、ロードメッセージを表示するのに十分な約1000msを起動する関数を信頼できると確信しています。

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 に答える
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 に答える