提交表單時添加一個加載gif？

Question

雖然我的代碼計算，Id像提交按鈕，從現在的「運行」，到我加載的gif。現在當我點擊運行按鈕時，我還需要一個特定的腳本來運行，它計算各種數據並將其返回到頁面。我寫了一個函數來保存另外兩個函數並按順序調用它們。我甚至添加了第三個功能，將恢復提交按鈕，但我似乎無法弄清楚這一點。

該網站是www.fsaesim.com/simulation.html這將更容易看到代碼，但附加的代碼。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="framework.js"></script> 
<script type="text/javascript"> 
    function ShowCalculation() { 
     var results = Main($("#vehicleWeightTxt").val(), $("#tireChoiceSel").val(), $("#wheelBaseTxt").val(), $("#wheelRadiusTxt").val(), $("#trackWidthTxt").val(), $("#hcgTxt").val(), $("#weightDistributionTxt").val(), $("#shiftRpmTxt").val(), $("#ntTxt").val()); 

     $('#outputTotalTime').empty(); 
     $('#outputTotalPoints').empty(); 
     $('#outputFuelUsed').empty(); 
     $('#outputTimeOpenThrottle').empty(); 
     $('#outputCorneringTimeTotal').empty(); 
     $('#outputTotalStraightSectionTime').empty(); 
     $('#outputTotalNumberOfShifts').empty(); 
     $('#outputTractionLimitedDuration').empty(); 
     $('#outputMeanLongAccel').empty(); 
     $('#outputMeanHorsepower').empty(); 
     $('#outputAccelerationTime').empty(); 
     $('#outputMeanAccelerationLongAccel').empty(); 
     $('#outputAccelerationTractionLimitedTime').empty(); 
     $('#outputAccelerationTotalPoints').empty(); 
     $('#outputAccelerationWideOpenThrottlePercentage').empty(); 
     $('#outputAccelerationShifts').empty(); 
     $('#outputAccelerationTrapSpeed').empty(); 
     $('#outputTotalEnduranceTime').empty(); 
     $('#outputTotalEndurancePoints').empty(); 
     $('#outputTotalEnduranceFuelUsed').empty(); 
     $('#outputTotalWOTPercentage').empty(); 
     $('#outputTotalEnduranceShifts').empty(); 
     $('#outputTotalEnduranceTractionLimitedTime').empty(); 
     $('#outputTotalEnduranceAcceleration').empty(); 
     $('#outputSkidpadTime').empty(); 
     $('#outputSkidpadPoints').empty(); 
     $('#outputSkidpadVelocity').empty(); 
     $('#outputSkidpadAcceleration').empty(); 
     $('#outputAutocrossTime').empty(); 
     $('#outputAutocrossPoints').empty(); 
     $('#outputAutocrossTotalShifts').empty(); 
     $('#outputAutocrossTractionLimitedTime').empty(); 
     $('#outputAutocrossVelocity').empty(); 
     $('#outputAutocrossWOTPercentage').empty(); 
     $('#outputAutocrossLongitudinalAcceleration').empty(); 
     $('#outputMaxHorsepower').empty(); 




     $("#outputTotalTime").append(results.output1); 
     $("#outputTotalPoints").append(results.output2); 
     $("#outputFuelUsed").append(results.output3); 
     $("#outputTimeOpenThrottle").append(results.output4); 
     $("#outputCorneringTimeTotal").append(results.output5); 
     $("#outputTotalStraightSectionTime").append(results.output6); 
     $("#outputTotalNumberOfShifts").append(results.output7); 
     $("#outputTractionLimitedDuration").append(results.output8); 
     $("#outputMeanLongAccel").append(results.output9); 
     $("#outputMeanHorsepower").append(results.output10); 
     $("#outputMaxHorsepower").append(results.output27); 


     $("#outputAccelerationTime").append(results.output11); 
     $("#outputMeanAccelerationLongAccel").append(results.output12); 
     $("#outputAccelerationTractionLimitedTime").append(results.output13); 
     $("#outputAccelerationTotalPoints").append(results.output14); 
     $("#outputAccelerationWideOpenThrottlePercentage").append(results.output15); 
     $("#outputAccelerationShifts").append(results.output16); 
     $("#outputAccelerationTrapSpeed").append(results.output17); 

     $("#outputTotalEnduranceTime").append(results.output1); 
     $("#outputTotalEndurancePoints").append(results.output2); 
     $("#outputTotalEnduranceFuelUsed").append(results.output3); 
     $("#outputTotalWOTPercentage").append(results.output4); 
     $("#outputTotalEnduranceShifts").append(results.output7); 
     $("#outputTotalEnduranceTractionLimitedTime").append(results.output8); 
     $("#outputTotalEnduranceAcceleration").append(results.output9); 

     $("#outputSkidpadTime").append(results.output18); 
     $("#outputSkidpadPoints").append(results.output19); 
     $("#outputSkidpadVelocity").append(results.output20); 
     $("#outputSkidpadAcceleration").append(results.output21); 

     $("#outputAutocrossTime").append(results.output22); 
     $("#outputAutocrossPoints").append(results.output23); 
     $("#outputAutocrossTotalShifts").append(results.output24); 
     $("#outputAutocrossTractionLimitedTime").append(results.output25); 
     $("#outputAutocrossVelocity").append(results.output26); 
     $("#outputAutocrossWOTPercentage").append(results.output4); 
     $("#outputAutocrossLongitudinalAcceleration").append(results.output9); 



    } 
    function mouseClick() { 
     document.getElementById("submitButton").src = "images/loading.gif"; 

    } 
    function revertBack() { 
     document.getElementById("submitButton").src = "images/simulationSubmit.png"; 
    } 
    function simulationEvents() { 
     mouseClick(); 
     ShowCalculation(); 
     revertBack(); 
    } 


</script> 

<center><a href=""><img src="images/simulationSubmit.png" alt="" id="submitButton" onmouseover="mouseOver()" onmouseout="mouseOut()" onclick="simulationEvents(); return false;" /></a></center> 

Answer 1

由於所有的處理在JavaScript正在做，直到它完成，這將佔用你的腳本。

Javascript不是多線程的，它一次完成一項任務直到完成任務。

一般來說，當您在處理表單時看到動畫gif時，該頁面正在使用AJAX或類似的東西。數字運算正在使用PHP或Python或類似的東西在服務器端發生。

動畫只是在javascript等待從服務器端腳本回聽時運行。

你也許能夠用this tutorial來解決這個問題，但對於這種情況看起來似乎有點矯枉過正。最簡單的事情可能是將表單數據發送到服務器端腳本，或者只處理在處理期間沒有動畫。

編輯：如果你想學習如何做AJAX，here's a tutorial，它使用jQuery，您的網站已經加載。