処理の前に3秒間遅延ajax要求

Question

データを送信するためのajaxスクリプトがあります。データを送信/処理する前に、私は.coin-flipを3秒間表示したいと思います。この3秒間が経過すると、通常、データはflip-process.phpに送られ、成功すると戻り値が表示されます。しかし、現在はとても速いので、ここで反転しているコイン（私が表示したいアニメーション）を見ることができます。したがって、私はajaxリクエストを処理する前に3秒の遅延が必要です。どうすればいいですか？

ここに私のajaxスクリプトがあります。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#submit").click(function() { 
     var dataString = { 
      flip: $("#flip").val(), 
      amount: $("#amount").val(), 
     }; 
    $.ajax({ 
      type: "POST", 
      url: "flip-process.php", 
      data: dataString, 
      cache: true, 
     beforeSend: function(){ 
       $("#coins").hide(); 
       $(".coin-flip").show(); 
     }, 
      success: function(html){ 
       $(".message").html(html).fadeIn(); 
        $("#coins").show(); 
        $(".coin-flip").hide(); 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 

Answer 1

にAJAX呼び出しをラップすることができます：

success: function(html){ 
    setTimeout(function(){ 

     $(".message").html(html).fadeIn(); 
     $("#coins").show(); 
     $(".coin-flip").hide(); 

    },3000); 
} 

Answer 2

あなたはeasistオプションは、あなたの成功の機能でタイムアウトを使用ではなく、実際の要求を遅らせることであろうタイムアウト

Answer 3

beforeSendブロック内でsetTimeoutを使用してください。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#submit").click(function() { 
     var dataString = { 
      flip: $("#flip").val(), 
      amount: $("#amount").val(), 
     }; 
    $.ajax({ 
      type: "POST", 
      url: "flip-process.php", 
      data: dataString, 
      cache: true, 
      success: function(html){ 
       setTimeout(function(){ 

        $(".message").html(html).fadeIn(); 
        $("#coins").show(); 
        $(".coin-flip").hide(); 

       },3000); 
      } 
     }); 
     return false; 
    }); 
}); 
</script> 

Answer 4

試しこの

setTimeout(function(){ callAjax(); }, 3000); 

function callAjax(){ 
    $.ajax({ 
     type: "POST", 
     url: "flip-process.php", 
     data: dataString, 
     cache: true, 
     beforeSend: function(){ 
      $("#coins").hide(); 
      $(".coin-flip").show(); 
     }, 
     success: function(html){ 
      $(".message").html(html).fadeIn(); 
       $("#coins").show(); 
       $(".coin-flip").hide(); 
     } 
    }); 
    return false; 
}