在單擊按鈕時設置jQuery AJAX調用中的延遲

Question

我有下面的代碼，當我單擊按鈕時它會執行。

當用戶單擊按鈕時，我需要在瀏覽器中顯示進度條/等待圖像5秒鍾。 用戶單擊按鈕時如何設置超時以及如何在頁面中顯示進度條/等待頁面圖像

$("#btnSubmit").click(function(){
var formData = $("form").serialize();           
  $.ajax({
    url: 'cgi-bin/config',
    type: 'POST',
    data: formData, // An object with the key 'submit' and value 'true;           
    success: function (result) {
      console.log(result);  
    },
    failure: function () {
      alert("Ajax request failed!!!");
    },error: function () {
      alert("Ajax request failed to update data!!!");
    }           
  });       
}); 

Answer 1

使用前發送並完成

$("#btnSubmit").click(function(){
  var formData = $("form").serialize();           
  $.ajax({
    url: 'cgi-bin/config',
    type: 'POST',
    data: formData, // An object with the key 'submit' and value 'true;           
    success: function (result) {
      console.log(result);  
    },
    failure: function () {
      alert("Ajax request failed!!!");
    },error: function () {
      alert("Ajax request failed to update data!!!");
    },  
    beforeSend: function(){
      $('.progress').show();
    },
    complete: function(){
      $('.progress').hide();
    }         
  });     
}); 

的HTML

<div class="progress" style="display:none;"><img src="loading.gif" />Loading...</div>

Answer 2

$("#btnSubmit").click(function(){
  var startTime = Date.now(),
  // finish function is called at the end - when request is completed and at least 5s passed
  // result will be null on error or whatever was received by success callback
  finish = function (result) {
    if (result === null) {
      // probably error, handle it..
    } else {
      // handle result
    }
    $('#progress').hide();
  },
  checkDone = function (result) {
    var r = Date.now() - startTime; // time taken by request
    if (r < 5000) { // if less than 5s then set timeout for remaining time
      setTimeout(function () {
        finish(result);
      }, 5000 - r);
    } else { // if there was already 5s finish immediately
      finish(result);
    }
  },
  formData = $("form").serialize();
  $('#progress').show();
  $.ajax({
    url: 'cgi-bin/config',
    type: 'POST',
    data: formData, // An object with the key 'submit' and value 'true;
    success: function (result) {
      console.log(result);
      checkDone(result);
    },
    failure: function () {
      alert("Ajax request failed!!!");
      checkDone(null);
    },
    error: function () {
      alert("Ajax request failed to update data!!!");
      checkDone(null);
    }
  });     
}); 

progress div示例（僅放在正文中）：

<div id="progress" style="display:none;position:absolute;z-index:99999;top:0;left:0;width:100%;height:100%;opcity:0.7;background:url('/img/progress.gif') 50% 50% no-repeate #000"></div>

Answer 3

我可以通過鏈接jsfiddle.net/joshdavenport/Qw6uv/4來修復我的代碼，效果很好。