AJAXを一時停止し、2秒間進行状況バーを表示してから続行します。

Question

調査タイプのアプリケーションでユーザーに質問するためのアプリケーションを作成しました。 ユーザーが回答をクリックすると、AJAX（w/jQuery）はPHPを呼び出して答えを記録し、次の質問を表示します。それはすべて正常に動作します。 問題は、回答をクリックして2秒間統計情報を表示したいのです。これを行うために、私はstat divを表示する関数を呼び出し、2秒待ってdivを閉じてから新しい質問を表示します。

問題は、.wnen、.then 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）を開始して2秒間を開始します。タイマーが終了したら、フラグを1つ設定して「NextQuestion」プロシージャを呼び出します。 ajaxリクエストが終了すると、別のフラグを設定し、NextQuestionを再度呼び出します。 NextQuestionでは、両方のフラグが設定されているかどうかをチェックします。そうであれば、次の質問が表示されます。そうすれば、少なくとも2秒待ってから、リクエストが戻る前には続行しませんが、必要以上に長く待つことはありません。