afficher un message javascript pendant le calcul

J’ai regardé autour de moi et je n’arrive pas à comprendre comment faire cela, même s’il me semble que ce serait très simple. (Développement mobile)

Ce que j’essaie de faire, c’est d’afficher un message (un peu comme une alerte, mais pas une alerte, mais plutôt comme un dialog) pendant le calcul. Simplement comme un chargement s’il vous plaît attendez. Je veux que le message apparaisse et rest là pendant le calcul puis soit supprimé. Je n’arrive tout simplement pas à trouver un moyen approprié de le faire.

Le bouton d’envoi est enfoncé et vérifie d’abord que tous les formulaires sont bien remplis, puis il doit afficher le message, il effectue le calcul, puis masque le message.

Voici la fonction de calcul.

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 = "Fault Rating:"; 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 ensortinges, 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 

Merci à tous pour votre temps, c’est grandement apprécié

Les ordinateurs sont rapides. Très rapide. La plupart des ordinateurs modernes peuvent exécuter plusieurs milliards d’instructions par seconde. Par conséquent, je suis presque certain que vous pouvez compter sur une fonction setTimeout pour déclencher environ 1 000 ms, ce qui suffit pour afficher un message de chargement.

 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); }  

Il est judicieux de séparer votre code d’affichage du code de calcul. Il devrait ressembler grossièrement à ceci

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

Si vous rencontrez des difficultés avec l’une de ces étapes, veuillez l’append à votre question.

Vous devez donner au thread principal de l’interface utilisateur l’occasion de restituer votre message avant de commencer votre calcul.

Cela se fait souvent comme ça:

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

L’utilisation du minuteur permet au code de tomber dans la boucle d’événements, de mettre à jour l’interface utilisateur, puis de lancer le calcul.

Vous utilisez déjà une section pour afficher une page de “résultats”. Pourquoi ne pas afficher une page de “calcul”?

Vraiment, il existe 4 000 000 manières différentes de traiter ce problème, mais pourquoi ne pas essayer d’écrire une fonction “displayCalculatingMessage” et une fonction “removeCalculatingMessage”, si vous ne souhaitez pas que tous les objects soient orientés object.

 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 } 

Il y a un milliard de façons d’accomplir cela, tout dépend de la manière dont vous voulez que les choses apparaissent à l’utilisateur – CE QUE vous voulez qu’il se passe.