在单击按钮时设置jQuery AJAX调用中的延迟

Question

I have below code, it executes when I click on a button.

I need to display a progress bar/waiting image in the browser for 5 seconds, when user clicks on a button. How to set time out and how to display progress bar/waiting page image in the page when user clicks on a button

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

Use beforeSend and complete

$("#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 example (just put in body):

<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来修复我的代码，效果很好。