Javascript 在jQueryAjax调用中单击按钮时设置延迟

我有下面的代码，它在我点击按钮时执行

当用户单击按钮时，我需要在浏览器中显示进度条/等待图像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!!!");
    }           
  });       
}); 

---

在发送前使用和完成

$("#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>

正在加载。。。

$（“#btnsupmit”）。单击（函数（）{
var startTime=Date.now（），
//finish函数在结束时调用-当请求完成并至少通过5s时
//错误或成功回调接收到的任何内容时，结果将为null
完成=功能（结果）{
如果（结果===null）{
//可能是错误，处理它。。
}否则{
//处理结果
}
$（“#进度”）.hide（）；
},
checkDone=函数（结果）{
var r=Date.now（）-startTime；//请求所用的时间
如果（r<5000）{//如果小于5s，则设置剩余时间的超时
setTimeout（函数（）{
完成（结果）；
}，5000-r）；
}否则{//如果已经有5s立即完成
完成（结果）；
}
},
formData=$（“form”）.serialize（）；
$（“#进度”）.show（）；
$.ajax({
url:'cgi bin/config'，
键入：“POST”，
data:formData，//键为'submit'且值为'true'的对象；
成功：功能（结果）{
控制台日志（结果）；
检查完成（结果）；
},
失败：函数（）{
警报（“Ajax请求失败！！！”；
checkDone（空）；
},
错误：函数（）{
警报（“Ajax请求无法更新数据！！！”；
checkDone（空）；
}
});     
}); 

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

我可以通过jsfiddle.net/joshdavenport/Qw6uv/4链接修复我的代码，这很好

你需要它来烦扰你的用户吗？：）我也有同样的感觉，但它存在于需求中：）你打算如何显示进度条？使用UI库还是什么？没有UI库，只需要使用jquery和cssNice，但你没有回答你打算如何显示进度条…是吗？这个连跑都跑不了！您将遇到语法错误。这将仅适用于发送前，但我需要设置超时。。我需要在中间显示进度图像。browser@sree我认为您需要在ajax请求完成后隐藏进度图像，对吗？是的，我需要在发送请求（如显示处理请求）之前在浏览器中间设置进度图像，并且需要在ajax请求完成后隐藏进度图像completed@sree,我更新了我的答案，你需要添加css。进展，希望它会工作

$("#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);
    }
  });     
}); 

<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>