Php 要暂停AJAX，请显示2秒的进度条，然后继续

我编写了一个应用程序，在调查类型的应用程序中向用户提问。 当用户单击答案时，AJAX（w/jQuery）调用PHP记录答案，然后显示下一个问题。一切正常。 问题是，我想在点击一个答案后两秒钟向用户显示一些统计数据。为此，我调用一个函数来显示stats div，然后等待两秒钟，隐藏该div，然后显示新问题

问题是，当我使用.wnen、.then jQuery函数时，屏幕会“冻结”，因此我无法使用动画gif让用户知道下一个问题即将出现。GIF与屏幕的其他部分一起冻结

下面是我用来展示下一个问题的函数

有没有更好的方法来暂停我正在做的事情

网址是：www.imazy.com/askQuestions.php

下面的函数调用方式如下：

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

    success: function(html){

        showNextQn(html);

    }
});

---

---

发送Ajax请求并确保它是异步发送的。然后，显示进度条并启动计时器（setTimeout）以启动两秒钟。计时器完成后，设置一个标志并调用“NextQuestion”过程。当ajax请求完成时，设置另一个标志，并再次调用NextQuestion。在NextQuestion中，检查是否设置了两个标志。如果是这样，您将显示下一个问题。这样，您可以确保至少等待两秒钟，并且在请求返回之前不会继续，但等待的时间不会超过必要的时间。

发送Ajax请求，并确保它是异步发送的。然后，显示进度条并启动计时器（setTimeout）以启动两秒钟。计时器完成后，设置一个标志并调用“NextQuestion”过程。当ajax请求完成时，设置另一个标志，并再次调用NextQuestion。在NextQuestion中，检查是否设置了两个标志。如果是这样，您将显示下一个问题。这样，您可以确保至少等待两秒钟，并且在请求返回之前不会继续，但等待的时间仍然不会超过必要的时间。

async:false

将锁定浏览器，因此在使用浏览器时要小心。

async:false

将锁定浏览器，因此在使用浏览器时要小心。

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