Хотите сделать AJAX-паузу, покажите индикатор выполнения на 2 с, затем продолжите

Question

Я написал приложение, чтобы задавать вопросы пользователям в приложении типа опроса.Когда пользователь нажимает на ответ, AJAX (w / jQuery) вызывает PHP для записи ответа, а затем показывает следующий вопрос.Это все работает отлично.Проблема в том, что я хотел бы показать некоторую статистику пользователю в течение двух секунд после нажатия на ответ.Чтобы сделать это, я вызываю функцию, чтобы ПОКАЗАТЬ статистику div, затем подождать две секунды, СКРЫТЬ, что div затем ПОКАЗАТЬ новый вопрос.

Проблема в том, что экран «зависает», когда я использую .wnen,.затем функционирует jQuery, поэтому я не могу использовать анимированный GIF-файл, чтобы сообщить пользователю о следующем вопросе.GIF просто зависает вместе с остальной частью экрана.

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

Есть ли лучший способ приостановить то, что я делаю?

URL-адрес: www.imazy.com/askQuestions.php

Следующая функция называется так:

$.ajax({
    type: "POST",
    url: "recordUserAns.php",
    data: data,
    cache: false,
    async: false,

    success: function(html){

        showNextQn(html);

    }
});

---

function showNextQn($response){
    // -------------- Pause and fade in/out -------------- //

    var btnVal = document.getElementById("toggleStats").innerHTML;

    if( btnVal == "Show Stats" ){ // Change the text
        var showStats = 0;
    }else{
        var showStats = 1;
    }

    function showDiv(){

        var dfd = $.Deferred();

        if ( showStats ){
            $('.ansPercent').fadeIn(fadeInTime, dfd.resolve);  // Show the hidden div
            // $('span#progBar').fadeIn(fadeInTime, dfd.resolve); // Show the progress bar
        }else{
            $('#content').fadeOut(fadeOutTime, dfd.resolve);
        }
        return dfd.promise();
    }

    $.when( showDiv() )
        .then(function( ajaxResult ){

            if ( showStats ){   
                pauseScript(qnPauseTime); // Pause given # milliseconds
            }
            // $('span#progBar').fadeOut(0); // Hide the progress bar
            $('#content').html($response); // Return the NEXT question
            $('#content').fadeIn(fadeInTime);

            // 'ajaxResult' is the server's response
        });

    document.getElementById("prevBtn").style.visibility="Visible";

    // Remove every instance of the class, as it is no longer needed
    $('a.ansHolder').removeClass('selected');
}

Answer 1

Отправьте запрос Ajax и убедитесь, что он отправлен асинхронно. Затем покажите индикатор выполнения и запустите таймер (setTimeout) для запуска двух секунд. После окончания таймера вы устанавливаете один флаг и вызываете процедуру NextQuestion. Когда запрос ajax заканчивается, вы устанавливаете другой флаг и снова вызываете NextQuestion. В NextQuestion вы проверяете, установлены ли оба флага. Если это так, вы увидите следующий вопрос. Таким образом, вы уверены, что подождите не менее двух секунд и не продолжите работу до возвращения запроса, но все равно не будете ждать дольше, чем необходимо.