Question

我写了一个应用程序，在调查类型的应用程序中询问用户问题。当用户点击答案时，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);

    }
});

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中，检查是否设置了两个标志。如果是这种情况，您将显示下一个问题。这样，您确定等待至少两秒钟，并且在请求返回之前不会继续，但您仍然不会等待超过必要的时间。

想要暂停AJAX，显示2s的进度条然后继续

1 个答案: