Добавление загрузочного GIF при отправке формы?

Question

Пока мой код рассчитывается, мне бы хотелось, чтобы кнопка отправки перешла от «RUN», которое теперь есть к загрузочному GIF, который у меня есть.Теперь, когда я нажимаю кнопку RUN, мне также нужен определенный скрипт для запуска, который вычисляет все виды данных и возвращает их обратно на страницу.Я написал функцию, которая содержит две другие функции и вызывает их последовательно.Я даже добавил третью функцию, которая вернула бы кнопку отправки назад, но я не могу понять это.

Веб-сайт 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 ждет ответа от серверного скрипта.

смогу обойти это немного с помощью этого урока , но это кажется излишним для этой ситуации.Возможно, проще всего было бы отправить данные формы в сценарий на стороне сервера или просто устранить отсутствие анимации во время обработки.

Редактировать: Если вы хотите узнать, как выполнять AJAX, вот учебник , использующий jQuery, который ваш сайт уже загружает.